Favorite Labo

最近、簡易なHTMLエディタを作成することが仕事で何度かあったのですが、nicky!さん用のコードをそのまま流用するわけにもいかないので自作しました。
せっかくなので置いておきます。

簡易エディタ

Windows版の IE6.0、FireFox1.5、Opera9.1、Netscape7.1 で動作確認をしています。Macは分かりません。（＾＾；
できるだけ簡単に応用できるように組んだつもりです。もしコードを流用したければどうぞ。

また、最近WYSIWYGなエディタも見かけるけど、どんな仕組みなのか気になっていたので調べてみた。
以下、最小限の機能を実装したサンプル。

WYSIWYGエディタ

Windows版のIE6.0でのみ動作します。他のブラウザは未対応です。クロスブラウザ対策は結構面倒なので…。
見てのとおり、ワープロソフトの感覚で文字を装飾することができます。HTMLの直接編集も可能。「Enter」で改行すると段落になりますが、「Shift+Enter」で普通の改行になります。こちらもコードを流用したければどうぞ。

以前、勉強会（というか交流会？）みたいな場所でMODxの事を教えてもらったのですが、これに実装されているWYSIWYGエディタを見て以来、どんな処理をしているのか気になっていました。
FCKeditorを使っているみたいなので、任意のエディタに導入するのは難しくないかもしれないけど、仕組みを知りたいので自作。

簡単に概要をメモしておくと、

• IEでは、JavaScriptで contentEditable をONにすると、ブラウザで編集機能が利用できる。
• Geckoエンジンの場合は designMode をONにすると、ブラウザで編集機能が利用できる。

基本はこれだけ。あとは execCommand で命令を送ってやると、太字とかリンクとか画像挿入とか自動で行ってくれます。画像を挿入した場合は移動やサイズ変更ができるのですが、全部自動です。便利。
…が、contentEditable はiframeにしか利用できないので、その対応が少し面倒。また、execCommand もブラウザによって少し動作が異なります。これもまた面倒。

データ送信の際は innerHTML でHTMLデータをテキストエリアに反映させているのですが、取得できるHTMLが結構ルーズです。タグが大文字で書かれているし、改行などは <br /> ではなくて <br> になっているし。
その対策に置換処理を行っているけど、これもきっちり対応させるのは大変そうだなぁ…。innerHTML ではなく、DOMで処理した方が良いんだろうか。あと、HTMLのインデントが勝手に変わるのもイヤだなぁ…。
細かく作りこむのは大変そうなので、高機能なものが欲しければ、すでに公開されているスクリプトを導入したほうが良さそうです。（＾＾；

ちなみに、送信データはPHPで受け取っていますが、もちろんPerlなど他の言語でもOKです。