summernoteについてのメモ

はじめに

久しぶりに、記事を書きます。
最近は、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エディターは、ずいぶんと進化しています。

こんなのとかもあります。

調べると、いろいろあって目移りしますが、
簡単なものがいいですね。