リッチテキスト編集

IE,FireFox,NN,mozillaではブラウザ上でワープロソフトのようにリッチテキスト編集を行うことができる。この機能の使い方をまとめる。

1.リッチ編集モードの有効化

ブラウザのリッチ編集モードを指定するにはdocumentのdesignModeをOnにする。

1.1 FireFox,NN,Mozillaの場合

編集エリア用のインラインフレーム(iframe)に対してdesignModeを設定する。

document.getElementById(id).contentDocument.designMode = "on";
(idにはiframeのidを指定すること)

以下のように編集用エリアのiframeを作っておく必要がある。

    <iframe id="edit" width="500px" height="400px">
      エディット用の領域
    </iframe>

1.2 IEの場合

ドキュメント全体に対してdesignMode=Onを設定する。

frames[0].document.designMode = "On";

1.3 極小サンプル

以下に簡単なリッチ編集モードの使用例を示す。「italic」「underline」の部分をクリックすると選択範囲がそれぞれ、斜体、下線付きになる。

<html>
  <body onload='init();'>
    <table border=1 >
      <tr>
         <td onmousedown='doc.execCommand("italic", false,
null);'>
           Italic</td>
         <td onmousedown='doc.execCommand("underline", false,
null);'>
           Underline</td>
      </tr>
    </table>
    <script type="text/javascript">
      var doc;
      function init()
      {
        id = "edit";
        if (document.all) {
          // IE
          doc = frames[0].document;
        } else {
          doc = document.getElementById(id).contentDocument;
        }
        doc.designMode = "on";
      }
    </script>

    <iframe id="edit" width="500px"
height="400px"></iframe>
  </body>
</html>

2.execCommandメソッド

designModeを"on"にした編集可能なドキュメントに対してコマンドを実行して、ドキュメントの編集(斜体化、色の変更等)を行える。例えば、選択範囲の文字を下線付きにする場合は以下のようにすればよい(docはdesignModeを"on"にしたdocumentオブジェクト)。

doc.execCommand("underline", false, null);

第一引数はコマンドで、ドキュメントにどのような操作を行うかを指定する。"bold","underline","fontsize",...など他多数。

第二引数は入力受け付けるユーザインタフェースを表示するかのフラグ(?)。現状、未サポートなのか、FireFox1.5ではtrueにすると例外(NS_ERROR_NOT_IMPLEMENTED)が返って来た。コマンドの種類によっては動くものもあるかもしれない。

第三引数はコマンドに与える引数。何を与えるかはコマンドにより異なる。"bold"などでは不要(null)だが、"forecolor"(文字色の指定)では"rgb(0,0,255)"のようにして色を指定する。

IEの仕様はこことかここ
mozillaの仕様はこちら日本語/英語版 (日本語版は古くて一部のコマンドが載っていなかったりするので注意。)

3.各コマンドの注意

3.1 heading

IEでは本コマンドは存在しない。IEと共通処理にするのならformatblockの方を使用した方がよい。

3.2 backcolor

IEとMozilla系で挙動が異なる。IEでは文字の背景色が変るがMozilla系ではドキュメント全体の色が変る。Mozilla系で文字の背景色を変える場合は、hilitecolorを使う。

3.3 formatblock

execCommandの第3引数にはタグの文字列を指定する。IEでは"<h1>"のように<>を付けないと動作しないので注意。Mozilla系では"h1"のようにタグ名の指定だけでも動作可能。

doc.execCommand("formatblock", false, "<h1>");

3.4 forecolor

文字色を設定する。色は'#RRGGBB'の形式の文字列で指定する。

doc.execCommand("forecolor", false, "#0000ff");

IE6だと、<font>タグのcolor属性で着色されるが、FireFoxだと<span>タグのstyle属性(color)で着色される。

IE6だと、文字色に空文字('')を渡すことで色の設定を解除できるが、FireFoxではできないみたい。また、IE6で色を解除する場合でも、<font>タグのcolor属性で付けられた色しか解除してくれないため、FireFoxで設定された色の解除はIE6でもできない。

4.サンプル

(1) リッチ編集モードを使用したサンプル。
http://www.bit-hive.com/~tomita/RichEditor/

(2) このWikiのデモページ編集モードはこちら。