Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

HTML5のWYSIWYGエディタ「wysihtml5」がシンプルで扱いやすい!jQuery不要

最近は、HTML5で組む機会も増えてきたので、いろいろ調べていたらHTML5ベースのWYSIWYGエディタを発見しました。

WYSIWYGエディタといえば、TinyMCEが有名どころですが、そんなにスタイルを変更させたくなかったり、高機能すぎて少し重たかったりするので、贅沢な不満もありました。

今回ご紹介するのは、高速でかつ軽量なHTML5ベースのオープンソースWYSIWYGエディタ「wysihtml5」です。

wysihtml5」は、HTML5の技術とプログレッシブエンハンスメント(Progressive Enhancement)のアプローチに基づいたオープンソースのリッチテキストエディタです。

高度なセキュリティの概念を使用して、メンテナンスが困難なタグとインラインスタイルの混在を防止することにより、

完全に有効なHTML5マークアップを生成

することを目指しているそうです。

jQueryも使っていないので、HTML5オンリーで作っている人にとっては組み込みやすいライブラリーだと思いますよ。

ツールバーの部分も自分で自由にスタイルをあてて作れるので、他の人と違うWYSIWYGエディタのように見せることができそうです。

Chromeであれば音声入力にも対応しているそうです。これは面白い試みですね!

wysihtml5の特徴

  • TinyMCEよりも高速でかつ軽量
  • URLの自動リンク
  • 有効なセマンティックHTML5マークアップを生成(Wordから貼り付けた場合にも対応)
  • クラス名の代わりにインラインスタイルを使用
  • ブラウザ間での改行の扱いを統一
  • XSSによる個人情報の盗難を防止するためにサンドボックス化されたインラインフレームを使用
  • Chromeの音声入力に対応
  • jQueryを必要としない

対応ブラウザ

iPhoneSafariでも動きました!

wysihtml5のデモとダウンロード

wysihtml5のデモを見ると、なかなかシンプルでカッコいい感じがします。

ダウンロードは、こちらからできます。

TwitterのBootstrap用のWYSIWYGプラグインbootstrap-wysihtml5」も存在するようなので、Bootstrapを使っている人は、簡単に組み込めそうです。

是非、チェックしてみてください。

こういったHTML5ベースのライブラリーがどんどん増えてくるとうれしいですねw

それでは、また!