bootstrap-wysiwygはBootstrap用のリッチなWYSIWYGエディタです。

使い勝手の良さもあってBootstrapを使ったWebサイトが増えています。より便利に使うためには多彩なウィジェットが欠かせません。今回はBootstrap用WYSIWYGエディタ、bootstrap-wysiwygを紹介します。

[![](http://images.moongift.jp/2013/04/Screenshot 2013-04-08 14.14.19_thumb.1365408162.png)](http://images.moongift.jp/2013/04/Screenshot 2013-04-08 14.14.19.1365408162.png)
シンプルなUIで使い勝手が良さそうです。

[![](http://images.moongift.jp/2013/04/Screenshot 2013-04-08 14.14.52_thumb.1365408166.png)](http://images.moongift.jp/2013/04/Screenshot 2013-04-08 14.14.52.1365408166.png)
文字の装飾は簡単にできます。ツールチップが出るのもいい感じです。

[![](http://images.moongift.jp/2013/04/Screenshot 2013-04-08 14.15.20_thumb.1365408170.png)](http://images.moongift.jp/2013/04/Screenshot 2013-04-08 14.15.20.1365408170.png)
画像の埋め込みにも対応しています。ファイルフォームを使って画像を読み込む形になっています。

[![](http://images.moongift.jp/2013/04/Screenshot 2013-04-08 14.15.34_thumb.1365408173.png)](http://images.moongift.jp/2013/04/Screenshot 2013-04-08 14.15.34.1365408173.png)
URLの埋め込み。ダイアログではないのがポイントです。

[![](http://images.moongift.jp/2013/04/Screenshot 2013-04-08 14.16.03_thumb.1365408178.png)](http://images.moongift.jp/2013/04/Screenshot 2013-04-08 14.16.03.1365408178.png)
文字サイズの変更もできます。

bootstrap-wysiwygではさらにマイクアイコンをクリックして音声によるテキスト入力にも対応しています(Google Chromeの機能を使っています)。さらにホットキーへの対応、ドラッグ&ドロップによる画像挿入、デスクトップとタブレット、スマートフォンに対応しているのが特徴です。

bootstrap-wysiwygはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

bootstrap-wysiwygはスマートフォンにも対応していますが、今後こうしたスマートフォン向けのリッチなテキストエディタはニーズが高まっていくと思われます。ソフトウェアキーボードでも入力しやすく、リッチなコンテンツが手軽に作れるようになる必要があります。

その際には写真を挿入したり、絵文字やスタンプが使えるようになっていると便利かも知れません。デスクトップでは当たり前すぎて気付かない機能がスマートフォンやタブレットでは必要になります。ぜひ触れてその新しいニーズを知るようにしてください。

Tiny, opensource, Bootstrap WYSIWYG rich text editor from MindMup

mindmup/bootstrap-wysiwyg · GitHub