無料Wikiサービス | デモページ | [広告] サイト検索サービス Sx4

メニュー

検索

最近更新したページ

2010/8/24

・Fedora13 + VMWare

2010/8/17

・Fedora + xemacs メニューバー文字化け

2010/7/3

・FrontPage

・OpenVZ User Beancounters

2009/11/15

・Plesk環境でのLogwatch

2009/9/3

・PHP $_SERVER["PHP_SELF"]

・PHP $_SERVER["HTTP_SHELL"] ??

2009/8/25

・MinGWでコンパイルしたDLLの利用

2009/7/27

・LinuxでのHX003ZT使用

2009/6/10

・MySQL 特定DBへのみアクセス可能なユーザの作成

リンク

Linuxメモ
Xnuメモ

リッチテキスト編集の差分

Rev.23 → 最新版追加箇所削除箇所

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

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

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

◎FireFox,NN,mozilla

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>

◎IE

1.2 IEの場合

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

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

ドキュメント全体に対して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>

以下に簡単なリッチ編集モードの使用例を示す。「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を使う。

2.execCommandメソッド

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

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でもできない。

3.各コマンドの注意

3.1 heading

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

3.2 backcolor

3.3 formatblock

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

3.4 forecolor

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

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

4.サンプル

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

とみぞーノート

リッチテキスト編集 の差分Rev.23 → 最新版 追加箇所 削除箇所

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

1.1 FireFox,NN,Mozillaの場合

1.2 IEの場合

1.3 極小サンプル

2.execCommandメソッド

3.各コマンドの注意

3.1 heading

3.2 backcolor

2.execCommandメソッド

3.3 formatblock

3.4 forecolor

3.各コマンドの注意

3.1 heading

3.2 backcolor

3.3 formatblock

3.4 forecolor

4.サンプル

リッチテキスト編集の差分

Rev.23 → 最新版追加箇所削除箇所