[JavaScript]簡易版リッチテキストエディタを作ってみた
アルバイト先でちゃんとしたのを作ったのだが、知識の定着のために簡易版リッチテキストエディタを作ってみた。
簡易版リッチテキストエディタ：http://www.y2-space.com/www/program/richtext.html
(IE,firefoxで動作確認済み)
リッチテキストエディタ(WYSIWYG)はブログの作成画面などで結構メジャーなもので、htmlをしらなくてもリンクや画像、文字サイズなどを編集できる。
リッチテキストエディタはまず編集エリアとしてインライン要素のiframeを用いる。このiframeのdesignModeという属性をOnにすることによってリッチテキストによる編集が可能になる。
ただブラウザにかなり依存するようなので、実際にはfirefoxとIEで以下のような感じで分ける必要がある。
- // firefox
- document.getElementById("iframe").contentDocument.designMode="On";
- // IE
- document.frames[0].document.designMode="On";
テキストを装飾するにはexecCommandを用いる。実際にテキストをBold(太字)にしたい場合、以下のようになる。※以下からfirefoxを基準にして書く
- // boldにする場合
- document.getElementById("iframe").contentDocument.execCommand("Bold",false,null);
基本的にexecCommandの第2引数はfalseであり、第1引数にコマンド名、第3引数に渡したい値(linkの場合などはurlを渡したりする)という感じになっているらしい。
リッチテキストの仕様などはこちらで
firefox
http://www.mozilla-japan.org/editor/midas-spec.html
IE
http://msdn2.microsoft.com/en-us/library/ms533049(VS.85).aspx
http://msdn2.microsoft.com/en-us/library/ms533720.aspx
作成した簡易版リッチテキストエディタでは”iframeの中身”というボタンを押下すると、リッチテキストをタグに直したhtmlタグ形式のテキストエリアが別に出力される。
またリッチテキスト入力とプレーンテキストへの切り替えはチェックボックスで切り替える。
本当はすべてのコマンドを確かめたかったが、ちょっとめんどくさかったので５つくらいに限定した。
ソースはちょっと汚いのであしからずｗｗ
