最近は、HTML5で組む機会も増えてきたので、いろいろ調べていたらHTML5ベースのWYSIWYGエディタを発見しました。
WYSIWYGエディタといえば、TinyMCEが有名どころですが、そんなにスタイルを変更させたくなかったり、高機能すぎて少し重たかったりするので、贅沢な不満もありました。
今回ご紹介するのは、高速でかつ軽量なHTML5ベースのオープンソースWYSIWYGエディタ「wysihtml5」です。
「wysihtml5」は、HTML5の技術とプログレッシブエンハンスメント(Progressive Enhancement)のアプローチに基づいたオープンソースのリッチテキストエディタです。
高度なセキュリティの概念を使用して、メンテナンスが困難なタグとインラインスタイルの混在を防止することにより、
することを目指しているそうです。
jQueryも使っていないので、HTML5オンリーで作っている人にとっては組み込みやすいライブラリーだと思いますよ。
ツールバーの部分も自分で自由にスタイルをあてて作れるので、他の人と違うWYSIWYGエディタのように見せることができそうです。
Chromeであれば音声入力にも対応しているそうです。これは面白い試みですね!
wysihtml5の特徴
- TinyMCEよりも高速でかつ軽量
- URLの自動リンク
- 有効なセマンティックHTML5のマークアップを生成(Wordから貼り付けた場合にも対応)
- クラス名の代わりにインラインスタイルを使用
- ブラウザ間での改行の扱いを統一
- XSSによる個人情報の盗難を防止するためにサンドボックス化されたインラインフレームを使用
- Chromeの音声入力に対応
- jQueryを必要としない
対応ブラウザ
wysihtml5のデモとダウンロード
wysihtml5のデモを見ると、なかなかシンプルでカッコいい感じがします。
ダウンロードは、こちらからできます。
TwitterのBootstrap用のWYSIWYGプラグイン「bootstrap-wysihtml5」も存在するようなので、Bootstrapを使っている人は、簡単に組み込めそうです。
是非、チェックしてみてください。
こういったHTML5ベースのライブラリーがどんどん増えてくるとうれしいですねw
それでは、また!