Wiki for 3arrows制作日記 6 WYSIWYGエディターの試作

CMS やブログサービスが提供している WYSIWYG エディターは <br> で改行してしまい <p> タグで段落を囲んでくれない。クラスで見栄えを指定できないといった不満が、Web に携わる人にはあるかと思います。

自分のサイトに用意した CSS のクラスや、その適用ルール（<p> タグの下に <img> がある場合は、イメージを左右に寄せるクラスを選べるとか）を簡単な json とかで用意して、WYSIWYG エディターの動作をカスタマイズしたいとか。そんなことを半年前から、考えていました。

またはそんな動機じゃなくても、なにか特殊な俺様エディタを作りたいとか。

Javascript 製の WYSIWYG エディターはいくつか公開されていますが、いったいどうやっているのでしょう？カーソルを動かしたり、入力したり、スクロールしたり、を実装すると思うと頭が痛くなります。

<iframe>をdesignModeにするらしい

実は多くの Javascript 製の WYSIWYG エディタは designMode というブラウザ自体が持つリッチテキスト編集機能を使っているようです。Javascript をひたすら駆使して頑張っている、というわけではないのです。

幸いにして、日本語で試作を公開しているページがあります。コードも短いのでいいですね。

このサンプルを触ってみると、件の <br> での改行はブラウザ自体のテキスト編集機能に由来しているのが分かります。

designModeを使わないWYSIWYGエディタ

その designMode を使わないで <input> タグ等を使用したエディタの試作を公開しているページがあります。designMode はいくつか問題があるらしいということで試作に取り組まれたそうです。

• 最小限の機能もまだ備えていませんが、コードが短いので理解しやすいです
• ブラウザのサポートが得られる designMode のようにはいかず、操作時の文字のカタツキ・チラツキが起こってしまいます
• タグで囲まれた文字の削除がうまくできません
• miceditor は MicroEngine という CMS 用の Javascript エディタの候補として試作したそうです。MicroEngineのオンラインデモサイトを拝見しましたが、現在は nicedit というエディタが使われていました。

以上のエディタを改造して見ました

• textNode の操作を律儀に行うことで、操作時のカタツキを減らせました
• タグ内の文字、入れ子のタグに対しても正しく削除を行えます。多分。
• エディタとして普通の水準に持っていくには、履歴やテキストのドラッグとかスクロールとか、まだまだたくさんの機能が要りますね

最後に

オレオレなエディタを作るための取っ掛かりが得られたので、良かったです。

ちなみに、jsDo.itデビューでした。開発は Aptana Studio で行ってコピペですが、サクサク公開できて便利ですね！