はじめに
久しぶりに、記事を書きます。
最近は、Webシステムの開発が多くなってきて、
いろいろ便利な機能を探しています。
summernoteについて
summernoteのホームページ
http://summernote.org/
bootstrapを使ったWYSIWYGエディターです。
簡単なので、使っています。
インストール
こんな簡単な設定です。
<link href="/js/summernote.css" rel="stylesheet" type="text/css">
<script src="/js/summernote.min.js"></script>
各言語対応をする場合は、上記のjsファイルの後に追加します。
<script src="/public/js/lang/summernote-<各言語コード>.js"></script>
日本語化の場合は、以下の通り。
<script src="/public/js/lang/summernote-ja-JP.js"></script>
設定
jsファイル内で以下を宣言します。
$('#detail').summernote();
htmlではこんな風に。
<textarea class="form-control" id="detail" name="detail" rows="5">
日本語化の場合は、以下の通り。
$('#detail').summernote(
lang: "ja-JP",
);
テクニック
このままだと、高さのないエディターになりますので、
$('#detail').summernote(
height: 300,
lang: "ja-JP",
);
とかします。
フォント!!!
デフォルトのフォントは、少しだけでかつ日本語をきれいに表示できないので、
追加します。
$('#detail').summernote(
height: 300,
fontNames: ["YuGothic","Yu Gothic","Hiragino Kaku Gothic Pro","Meiryo","sans-serif", "Arial","Arial Black","Comic Sans MS","Courier New","Helvetica Neue","Helvetica","Impact","Lucida Grande","Tahoma","Times New Roman","Verdana"],
lang: "ja-JP",
);
これで、だいぶ使い勝手がよくなります。
mysqlに設定するときは
alter table table_name add detail MEDIUMBLOB;
とかしておきます。
BLOB形式にしておくのが無難です。
終わりに
WYSIWYGエディターは、ずいぶんと進化しています。
こんなのとかもあります。
調べると、いろいろあって目移りしますが、
簡単なものがいいですね。