Blogのエディタを作るのは結構簡単。

ふと、Blogのエディタの仕組みが気になってしまい、当BlogをFirebugでのぞいて見た。
すると、iframeによって別のページに書き込まれている事が見て取れた。

ん?これは何だ?とソースを覗くと、
iframeのdesignModeとやらをonにすると、このように書き込みが出来るらしい。
designModeの詳細はmozillaさんのページにあり、それによると色々出来るということが分かる。


再び、ソースに目をやると、blogのエディタは以下のような手順を踏みながら生成されていくらしい。
1、HTML編集用のTextAreaをjavascriptが切られていても編集できるようにbodyタグに直接書いておく。
2、font-sizeの変更や、Linkの挿入などのToolBoxの作成。
3、id"edit"をもったiframeの生成
4、画面に描画
5、iframeのdocumentを取得(iframe.contentWindow.document)
6、取得したdocumentにopen(),close();
7、取得したdocument(iframe.contentWindow.document.designMode="on")にする。
8、TextArea.style.display = "none"にする。
9、iframe.style.display = "block"にする。

と約9つのステップで生成できる。また、Linkの生成、font-sizeの変更などは、mozillaのページに載っている
(execCommandを使う)。また、tableの作成などは無い。けど、自作しても大して難しくは無いと思う。
(document.createElementでtagを生成して、clickイベントでtd内にinputタグを生成し、入力が終わると、input
タグの中身をtdタグの中に流し込み、inputタグを消す)。

実際、私自身作ってみたが、firefoxIEだけに絞る実装をしたら、デバックを入れても約1時間程度のコーディングでmyBlogEditerが出来てしまった。

Sample

openWYSIWYGなどがあるため、機能性を求めるなら自作する意味はさして無いと思う。けど、かなり簡単にmyEditerが作れてしまうので、ぜひ一度作ってみては?