Linuxなどのメモ書き
リンク

その他のWiki
Linuxメモ
Xnuメモ

会社
(有)ビットハイブ
受託開発やってます。

よくやる仕事

・Webシステム開発(LAMP環境)
・Linuxサーバー設定関連
サーバー移転作業代行

 

検索

Adsense

リッチテキスト編集


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

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

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

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

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

サンプル

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



最終更新 2006/04/18 01:55:19 - kztomita
(2006/04/10 22:33:33 作成)