Logo address

Javascript: Rich Text Editor

2007/10/09

Javascript でワープロのような WYSIWYG なエディタ(Rich Text Editor)を作りたい場合には "iframe" に対してデザインモード(designMode)を使用する。ネット上にはこのモードを利用したと思える見栄えの良いデモがあり、また Google もこれを利用していると思う。しかしここでは実用性や見栄えよりも、この仕組みが分かりやすい事が目標のデモを示す。具体的なコードは「ページソース」を見て下さい。

このデモは Mozilla 系(Firefox,Camino など)と Opera で動作が確認されている。

designMode に関する解説は Mozilla のホームページ注1に書かれているので、それと突き合せてソースコードを読めば良いであろう。しかしこの解説は親切とは言いがたく、単なるメモに近い。発展途上だからか? 僕のデモはできる事の全てではないので、さらに発展させたければ Mozilla のページは役に立つ。なお、このページにはテーブルの事については全く触れられていない。しかし実際にはテーブルもある程度サポートされているのだ。

注1. Enabling Rich Text Editing in your web page:
http://www.mozilla.org/editor/midas-spec.html
http://www.mozilla-japan.org/editor/midas-spec.html

ホームページの作成を WYSIWYG で行うのは可能な範囲が存在すると思う。ホームページのソースの中には、ディスプレイ上では見えないけども重要な部分が存在する。それらをどのようなユーザーズインターフェースで編集して行くのか、それとも WYSIWYG なエディタのサポート範囲から外すのか、よく考えなくてはならないだろう。

Rich Text Editor を textarea で実現していると主張しているホームページが存在する注2。僕はまだ内容を精査していない。

注2. Rich Text Editor (for textareas)
http://www.dynamicdrive.com/dynamicindex16/richtexteditor/index.htm