Chrome Life

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

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

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を必要としない

対応ブラウザ

  • Firefox 3.5 以上
  • Chrome
  • IE 8 以上
  • Safari 4 以上
  • Safari on iOS 5 以上
  • Opera 11 以上

iPhoneのSafariでも動きました!

wysihtml5のデモとダウンロード

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

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

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

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

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

それでは、また!

【コーディングスピードが一気に加速するHTMLエディタ】
コーディングしながらリアルタイムに結果を確認することができるブラウザ上で動作するHTMLエディタです。とても便利なので是非チェックしてみてください。
HTML5、CSS3、JavaScriptがリアルタイム編集できる!軽量HTMLエディタ「Liveweave」

【Bootstrap版 Dreamweaver】
Bootstrapベースのページデザインが、ブラウザ上でパーツを組み合わせていくだけで作ることができます。Bootstrapをうまく融合した最速でウェブのユーザーインターフェースを構築するツールですので是非チェックしてみてください。
BootstrapのUIがドラッグアンドドロップだけで組めるエディタ「Jetstrap」

HTML5+CSS3のオススメ書籍

タグ: , , ,

新着記事

この記事の読者におすすめの記事

このブログを購読しませんか?

RSSリーダーを使うと、このブログの更新情報がすぐに入手できるようになります。
このブログのRSSをRSSリーダーに登録すれば、更新されるたびに記事の本文を読むことができます。

Twitterでもこのブログの更新情報や筆者が見つけた情報をつぶやいていますので、@opakenをフォローしていただけるとうれしいです。

Facebookのファンページも用意しています。こちらでも更新情報を配信しています。「いいね!」をクリックしてもらうだけで購読できます。