ユーザにコンテンツを作ってもらう上で欠かせないのがWYSIWYGエディタです。HTMLでの記述に慣れた人にとっては邪魔くさいかも知れませんが、そうでない人のがたくさんいます。そうした人が自由に思い通りにコンテンツが作れるWYSIWYGエディタはとても大事です。 今回紹介するSummernoteもそんなWYSIWYGエディタの一つですが、Bootstrap向けという点がポイントになっています。

Summernoteの使い方

こちらがSummernoteです。シンプルなUIなのが特徴です。

ツールバーを消すモードもあります。

テーブルも追加できます。

生成されるHTMLも綺麗です。Bootstrapに対応したクラスが割り当てられているのもポイントです。

SummernoteはDjangoやRailsに組み込んで使うこともできます。さらにi18nをサポートしていたり、APIも用意されていますのでJavaScriptと組み合わせた利用も可能です。キーボードショートカットも多いので、慣れた人にとっても使いやすいでしょう。

SummernoteはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Summernote - Super Simple WYSIWYG editor on Bootstrap summernote/summernote