無料Wikiサービス | デモページ
Linuxなどのメモ書き
検索

Adsense

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


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


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

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

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

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


document.getElementById(id).contentDocument.designMode = "on";

(idにはiframeのidを指定すること)

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

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

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

エディット用の領域
</iframe>

◎IE

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

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

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


◎極小サンプル

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

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

<html>
<body onload='init();'>
<table border=1 >
<tr>
<td onmousedown='doc.execCommand("italic", false, <html>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 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
IEMozilla挙動なるIEでは文字背景色るがMozillaではドキュメント全体Mozilla文字背景色える場合hilitecolor使

◎ formatblock
execCommand3引数にはタグ文字列指定するIEでは"<h1>"のように<>けないと動作しないので注意Mozillaでは"h1"のようにタグ指定だけでも動作可能

各コマンドの注意

◎ 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/