Javascriptを使用したフリーWYSIWYGエディタ・10選
2012年5月29日追記:jQueryベースのWYSIWYGエディタ「Redactor」
百式さんで「Redactor」というjQueryベースのWYSIWYGエディタが紹介されていました。細かな検証はしていませんが、jQueryを使用しているため、実装のハードルは低そうです。TinyMCEを「使わない理由」になるかどうか? 現在のところ活発にアップデートされてるようですし、ざっくりとロードマップが示されていることにも期待がもてます。ちなみにIE6には非対応ですので、日本のビジネスユースではまだ厳しいかもしれません。
http://redactorjs.com/
この情報は2009年9月現在のものです。2011年9月追記
最近はもっぱらTinyMCEを使用。機能が豊富(不要な機能OFFも可)、新しめのニーズもキャッチアップしてくれそう、Webサイトも2年前からリニューアルされ気合が伝わってくる(笑)などの理由による。これを使わない理由に出くわしたら、また情報Updateしたいと思います。
http://www.tinymce.com/index.php
フリーで使えるものを、ちょっと必要にかられたので調べてみた。Javascriptを使用したWYSIWYGのリッチテキストエディタ(RTE)のまとめ。
最近はいろいろなサイトでRTEを見かけるようになったが、2、3年前までは動作環境や使い勝手の面で導入には大きな壁があった。今ではライブラリをダウンロードしてきて数行のコードを挿入するだけという、非常に簡単な方法でWYSIWYGエディタをサイトに設置できるようになっている。またフリーで使えるものも数多くあるため、コスト面もほとんど気にする必要がなくなったと言っていいだろう。
私が今回主に注目したのは以下のような項目。機能面では特殊なものは必要としなかったので、どのエディタでも必要十分という印象。なのであまり重視しなかった。もちろん「この機能が必須」という条件が決まっている人は、そこである程度絞り込めるだろう。
こんなところを重視(?)したよ
- 日本語ドキュメント
意外な第1条件w しかしここが充実しているとクライアント対応が格段に楽になる。しかし直球ストレートで日本語版というのはなかなかない。Web上に日本語リソースが多く転がっているかというところまで見てみた。いちおうググったリンクも貼ってるのでものぐさな人はどぞ。 - 動作環境
いわゆるモダンブラウザ+IE6で動けば問題なし。OSで言えば当然Mac対応も必須。ほんの2、3年前ならこんなことは言えなかったので感無量(Macユーザの開発者ですら「Macはまぁ・・・ごにょごにょ」みたいな感じだった)。Macのシェアが伸びてるのもあるし、標準準拠したものならば自動的にMac(のSafariやFirefox)に対応完了してしまう、ということもある。 - 今後のサポートに期待ができそうか?
しばらく更新がなかったりするのはマイナス印象。特にこれからはHTML5とCSS3の時代になっていくので、それらにガンガン対応してくれそうだったりすると嬉しい。強欲! - 見た目
昨今のWebアプリでは非常に重要。RTEすらもコモディティ化しつつある現在、差別化のポイントは意外と見た目だったりするかも。やっぱりUIが洗練されてるものがよいですね。
機能面でひとこと書いておくと、大きく違いが別れるところとしては、「テーブル(表組)作成機能があるかないか」「ファイルブラウザ(画像アップ機能等)を備えているか」「生成するソースがどのようなものか」といったあたりだ。ファイルブラウザについては当然サーバ環境にも依存してくるので、その辺の知識がないと若干しきいは高くなる。また生成するソースについては、ひところのように font タグ使いまくりというようなツールは少なくなっている模様。これはうれしい。
それでは順不同にて。主観やリサーチ不足はご容赦を。フリーとはいってもライセンスの形態はさまざまなので、最終的には各サイトで確認してほしい。
動作環境は明記があればそれをコピペ。なければ調べてざっくり記述。
これ以外にもオススメがあれば教えていただけると嬉しいのだ。
prototype.jsでクロスブラウザなWYSIWIGエディタ
- URL:http://a-h.parfe.jp/einfach/archives/2006/1213124637.html
- 日本語?はい(→日本語リソースをGoogleで検索)
- 動作環境:IE、Firefox、Opera、Safari(文字の拡大縮小はFFのみ)
- シンプルでかわいい。プレビューやHTMLソースがリアルタイムで変わって行くので、安心感がある。装飾解除はSafari未対応とあったがSafari 4.0.3では動作した。
- MIT ライセンス
- スクリーンショット
YUI Library: Rich Text Editor
- URL:http://developer.yahoo.com/yui/editor/
- 日本語?いいえ(→日本語リソースをGoogleで検索)
- 動作環境:いわゆるモダンブラウザ+IE6
- おなじみ Yahoo! UI Library のひとつ。Web上のリソースはさすが豊富です。
- BSD ライセンス
- スクリーンショット
tinyMCE
- URL:http://tinymce.moxiecode.com/index.php
- 日本語?いいえ(→日本語リソースをGoogleで検索)
- いわゆるモダンブラウザ+IE6
- 高機能かつすっきりで好印象。ドネーションウェア。
- LGPL ライセンス
- スクリーンショット
NicEdit
- URL:http://nicedit.com/
- 日本語?いいえ(→日本語リソースをGoogleで検索)
- 動作環境:いわゆるモダンブラウザ+IE6
- ベーシックだけどセンスのよいインタフェース。機能&サンプルコードの親切なデモがついていて、これも好印象。開発者は22歳。ドネーションウェア。
- MIT ライセンス
- スクリーンショット
CKEditor
- URL:http://ckeditor.com/demo
- 日本語?いいえ。ただしUIは日本語を選択できる。(→日本語リソースをGoogleで検索)
- 動作環境:いわゆるモダンブラウザ+IE6
- 機能も豊富でアクセシビリティにも配慮された、かなり「本気」が伝わってくるエディタ。UIもかわいい。
- ライセンスには、オープンソースライセンスと商用ライセンスがあるので、特に商用利用には注意。IBM(Lotus)、オラクル、アドビなどのアプリケーション内でもCKEditorが使われている模様(と書くと帰って敷居が高くなるのだろうか?)。
- 詳しくは http://ckeditor.com/license 参照。
- スクリーンショット
WYMeditor
- URL:http://www.wymeditor.org/
- 日本語?いいえ(→日本語リソースをGoogleで検索)
- 動作環境:いわゆるモダンブラウザ+IE6
- なんか色々な意味ですごいエディタだ。(見出し要素、段落要素など)自分がどの要素を編集中かを表示してくれるので、WYSIWYG使用よるソースの乱れを気にする人にはうってつけだ。RTEはもともとは、HTMLに慣れてない人でも簡単にコンテンツを作れるようにするためのものであったと思うが、WYMeditorは、知識のある人が手打ちほどではないがそれなりに納得のいく編集作業を行うもの、といった趣がある。使いどころにセンスが問われるエディタかもしれない。UIが少々野暮ったいのが残念。そこもカスタマイズしろって?すんまそん。
- MIT & GPL ライセンス
- スクリーンショット
jwysiwyg
- URL:http://code.google.com/p/jwysiwyg/
- 日本語?いいえ(→日本語リソースをGoogleで検索)
- 動作環境:いわゆるモダンブラウザ+IE6
- 前述のWYMeditorよりも機能を少なくする代わりにファイルサイズを小さくすることを目指したらしいエディタ。トータルで「less than 26Kb total and only 18Kb of code and 7Kb packed」だそうです。bは小文字でいいのか?文字色やtable作成機能はない。ライトウェイトなエディタをお求めの向きにはぜひ。
- MIT & GPL ライセンス
- スクリーンショット
以下は、フリーで使用はできるものの、導入環境が限定されたり日本語リソースが少ないなど、少々注意を要するものたちです。
RTE (Rich Text Editor) ASP.NET Control
- URL:http://www.codeplex.com/rte
- 日本語?いいえ(→日本語リソースをGoogleで検索)
- 動作環境:IE、Firefox(Safariでも動作?)
- Microsoftのコード共有サイトから生まれたオープンソースエディタ。ASP.NET環境なら導入の簡単さから有力な候補になりそう。逆にそれ以外の環境では当然利用不可。
- Microsoft Public License (Ms-PL)
- スクリーンショット
Cross-Browser Rich Text Editor (RTE)
- URL:http://www.kevinroth.com/rte/
- 日本語?いいえ(→日本語リソースをGoogleで検索)
- IE5.5+/Mozilla 1.3+/Firefox 0.6.1+/Netscape 7.1+/Mac Safari 1.3+/Opera 9+
- 最終リリースが2006年なのでちょい古めかも。
- Creative Commons License。
- スクリーンショット
XStandard version 2.0 for Windows/OS X
- URL:http://xstandard.com/
- 日本語?いいえ(→日本語リソースをGoogleで検索)
- 動作環境:Internet Explorer, Firefox, Safari and Opera.
- Liteバージョンは商用でも無料。Proバージョンは有料。日本語だと自動翻訳サイトのようなとこしかヒットしません。英語サイトはそれなりにヒットしますが。
Javascriptによるリッチテキストエディタは、Webアプリケーション全盛の時代とHTML5+CSS3への移行を前に、さらに便利かつ高機能になっていく分野と思われるので、これからも随時情報は追いかけて行きたい。
あとはやはりモバイル。iPhoneやAndroidに最適化されたリッチテキストエディタなんてのも出てくるでしょうね。
さて肝心の私自身の選定結果だが、ひとまず「NicEdit」「tinyMCE」と「prototype.jsでクロスブラウザなWYSIWIGエディタ(短い愛称はないのでしょうか。笑)」の3本に絞って考えようと思う。