リッチテキスト編集

Rev.16を表示中。最新版はこちら。

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

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

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

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

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

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

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

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

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

◎極小サンプル
以下に簡単なリッチ編集モードの使用例を示す。「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>

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の仕様はこちら日本語/英語版
日本語版は古くて一部のコマンドが載っていなかったりするので注意。

IEの仕様はこちら

サンプル

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