ナラ🔔ベル Webサービス ブログ

ナラベル Webサービスに関する情報発信

WYSIWYGエディタの導入とシリーズ説明項目の拡張について

WYSIWYGエディタを導入しました。エディタはsummernoteを使っています。

 

summernote.org

導入も簡単で多機能,かなり満足です。一つ問題は,改行した場合に設定されるHTMLタグが<p>であるため,無駄に行間が開いてなんとなく締まりのない印象がでてしまうこと。これを<BR>に変更したのですが,なかなか実装できずに,結局は以下のサイトのやり方で対応しました。

takahashi-it.com

ただし,この設定をおこなうと箇条書きがうまく動かなかったので,箇条書きのメニューボタンを非表示にとりあえず設定した。まだ,同時にsummernoteを適用したtextareaの文字数カウント機能も実装したので,結局初期化は,以下のような感じになりました。

 

$('#mes').summernote({
toolbar: [
  ['style', ['style']],
  ['font', ['bold', 'underline', 'clear']],
  ['fontsize', ['fontsize']],
  ['fontname', ['fontname']],
  ['color', ['color']],
  <%-- ['para', ['ul', 'ol', 'paragraph']], --%>
  ['table', ['table']],
  ['insert', ['hr','link']],
  ['view', ['undo','redo','help']],
 ],
 fontNames: ['Arial', 'Arial Black', 'Courier New','YuGothic'],
 height:300,
 lang: "ja-JP"

 }).on("summernote.enter", function(we, e) {
   $(this).summernote("pasteHTML", "<br>&#8203;");
   e.preventDefault();
 }).on('summernote.keyup', function(we, e) {
  $('#charcnt').text($(this).summernote('code').length);
 });

 $('#charcnt').text($('#mes').summernote('code').length);

 

 純粋な文字数ではなく,非表示のHTMLタグも文字数に含まれている。ナラベルへのレコード登録の都合上,非表示文字も含まれている方が,MaxLengthエラーになりにくいので。

f:id:root-libshelf:20200519133708p:plain

Summernoteを適用した入力エリア

 

WYSIWYGエディタを使って入力したエントリーは,このような感じになります。

【決断】が語る未来 / ナラベル運営チーム / ナラベル

 

ナラベルのコンセプトとして,Twitterとの連携がありました。そのため,テーマの説明はTweetの文字数制限と連動させていたのですが,管理チームが実際にナラベルにエントリーしていて,Tweetの文字数制限を超えて書きたいとかブログのように書きたいなどの要望が上がってきたので,今回の対応となりました。まさに,WYSIWYGエディタを導入したことにより,ブログの記事のように記載できるようになっていますので,テーマ別に本を集めて,それに記事をつけるブログといった使い方もしていただけると思います。そういった意味で,図書館の方だけではなく,本好きの方にもナラベルをご利用いただけると嬉しい限りです。