株式会社キャッチアップで働くエンジニアのブログです。

技術雑記

[JavaScript] Webサービス開発で使えるWYSIWYGエディターまとめ

Twitter bookmark Facebook LINE Pocket Feedly RSS

まぁ、どこかで見たことありそうなまとめ記事ですが、個人的に調べる機会があったのでまとめました。
今回主に気にした点は、生成されるHTMLソースの出来具合です。
以前HTMLAreaというWYSIWYGエディターがIEで見ると改行が消えてぐちゃぐちゃになるという事があったので。



どのWYSIWYGエディターも基本的な操作はできるのですが、細かいところに納得いかなく、一長一短な感じでした。

テストしたブラウザ

TinyMCE
TinyMCE

DEMO画面

テーブル機能:
フォーム機能:
印刷機能  :
レイヤー機能:

改行や空白が自動整形される
IE, Firefox, Opera, Safari, Google Chrome

改行や空白が自動整形されない
なし

YUI Library Examples: Rich Text Editor
YUI Library Examples: Rich Text Editor

DEMO画面

テーブル機能:
フォーム機能:
印刷機能  :
レイヤー機能:

改行や空白が自動整形される
IE

改行や空白が自動整形されない
Firefox, Opera, Safari, Google Chrome

Editor自体は標準的ですが、他のYUI Libraryと組み合わせるといろいろできるみたい。
こんなんとか

FCKeditor
FCKeditor

DEMO画面

テーブル機能:
フォーム機能:
印刷機能  :
レイヤー機能:
日本語ローケル対応

改行や空白が自動整形される
IE, Firefox, Safari, Google Chrome

改行や空白が自動整形されない
Opera

ブロック表示機能とかあった。エディタの機能はなかなか良いかも。

Free Online Javascript WYSIWYG Rich Text Editor
Free Online Javascript WYSIWYG Rich Text Editor

DEMO画面

テーブル機能:
フォーム機能:
印刷機能  :
レイヤー機能:

改行や空白が自動整形される
IE

改行や空白が自動整形されない
Firefox, Opera, Safari, Google Chrome

Xinha
Xinha

DEMO画面

テーブル機能:(プラグインにて機能拡張、Opera, Safari, Google Chromeは一部動作しない)
フォーム機能:(プラグインにて機能拡張)
印刷機能  :無?
レイヤー機能:無?
右クリックメニュー:有(プラグインにて機能拡張、Opera 動作しない)
日本語ローケル対応

改行や空白が自動整形される
IE

改行や空白が自動整形されない
Firefox, Opera, Safari, Google Chrome

但し、どのブラウザもタグの種類によりインデントがそこそこ綺麗に施される
プラグインにて機能拡張たくさん
HTMLAreaの後継らしい

Open Source Cross-Browser WYSIWYG Editor
Open Source Cross-Browser WYSIWYG Editor

DEMO画面

テーブル機能:
フォーム機能:
印刷機能  :
レイヤー機能:

改行や空白が自動整形される
IE, Firefox, Opera

改行や空白が自動整形されない
なし

ブラウザが未対応
Safari, Google Chrome

とりあえずXinhaが最有力候補ですが、ExtJSにもHTMLEditorがあるんでそれで済ませちゃうかもしれません(;゚д゚)ェ......

Twitter bookmark Facebook LINE Pocket Feedly RSS