Mozilla におけるリッチテキスト編集

イントロダクション

Mozilla 1.3 は、Microsoft^® Internet Explorer の designMode 機能の実装を導入しました。 Mozilla 1.3 のリッチテキスト編集機能は、HTML 文書をリッチテキスト編集環境へと変える designMode 属性をサポートします。更に、Firefox 3 以降、Mozilla は、あらゆる要素を編集可能にしたり編集不能にしたりする (後者は、編集可能な環境に含まれる固定したい要素の編集をできなくするのに使います) Internet Explorer の contentEditable 属性をサポートするようになりました。

リッチテキスト編集の準備をする

リッチテキスト編集機能は、ドキュメント内の iframe 要素などの designMode プロパティを "On" にすることによって初期化されます。designMode が "On" にされると、そのドキュメントはリッチテキスト編集範囲となり、ユーザはテキストエリアに入力するかのように書き込むことができるようになります。コピーやペーストなどの最も基本的なキーボード操作は可能ですが、その他の機能はウェブサイト側で実装する必要があります。

同様に、contentEditable 属性を "true" にすることにより、ドキュメント中の個々の要素を編集可能にすることができます。

コマンドの実行

HTML ドキュメントを designMode にすると、ドキュメントオブジェクトは編集可能な範囲の内容を操作するためのコマンドを実行する execCommand メソッドを使えるようになります。ほとんどのコマンドは、ドキュメント内の選択されている範囲に影響を及ぼす (太字にする、斜体にするなど) ものですが、その他にも、新たな要素 (リンクなど) を挿入したり、その行全体に影響を及ぼす (インデントなど) ものもあります。contentEditable を使用している場合では、execCommand メソッドを呼んだときには現在アクティブな編集可能要素に影響を及ぼします。

execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)

引数

String aCommandName

コマンドの名前

Boolean aShowDefaultUI

デフォルトのユーザインターフェイスを見せるか否かをあらわします。Mozilla では実装されていません。

String aValueArgument

一部のコマンド (insertimage など) は、追加の引数 (画像の URL) を必要とします。引数が不要な場合には、ここには null を渡します。

コマンド

backColor

ドキュメントの背景色を変更します。styleWithCss モードでは、含まれているブロックの背景色を変更します。引数として、色をあらわす値を渡す必要があります。(Internet Explorer では、テキストの背景色を変えるのに使われます。)

bold

選択された箇所、あるいは挿入箇所の太字のオン/オフを切り替えます。(Internet Explorer では、B タグではなく STRONG タグを使います。)

contentReadOnly

ドキュメントを読み取り専用または編集可能にします。引数として true/false の boolean 値が必要です。 (Internet Explorer ではサポートされていません。)

copy

現在選択されている範囲をクリップボードにコピーします。設定ファイル user.js でクリップボードを使用可能にしないと使えません。参照

createLink

選択されている箇所があった場合のみ、選択箇所にアンカーリンクを生成します。HREF の URI として使う string 値を引数として渡す必要があります。この URI は、最低1文字 (空白文字でも可) は必要です。 (Internet Explorer は URI 値を null としてリンクを生成することもできます。)

cut

選択箇所を切り取り、クリップボードにコピーします。設定ファイル user.js でクリップボードを使用可能にしないと使えません。参照

decreaseFontSize

選択箇所あるいは挿入点を SMALL タグで囲み、文字を小さくします。(Internet Explorer ではサポートされていません。)

delete

選択された範囲を削除します。

fontName

選択範囲あるいは挿入点のフォント名を変更します。引数としてフォント名を表す文字列 (例: "Arial") が必要です。

fontSize

選択範囲あるいは挿入点の文字サイズを変更します。HTML 文字サイズ (1-7) を引数として渡す必要があります。

foreColor

選択範囲あるいは挿入点の文字色を変更します。色をあらわす文字列値を引数として渡す必要があります。

formatBlock

選択範囲または挿入点のある行に HTML ブロックスタイルを追加します。タグ名を文字列で引数として渡す必要があります。実際はすべてのブロック要素タグ(例: "H1", "EM", "BUTTON", "TEXTAREA")が使えます。(Internet Explorer では H1 - H6, ADDRESS, PRE しか使えず、"<H1>" という具合に < > を付ける必要があります。)

heading

選択範囲または挿入点のある行に見出しタグを追加します。タグ名をあらわす文字列を引数として渡す必要があります(例: "H1", "H6")。 (Internet Explorer ではサポートされていません。)

hiliteColor

選択箇所または挿入点の背景色を変更します。色をあらわす文字列を引数として渡す必要があります。この関数を利用するには、UseCSS をオンにしなければなりません。 (Internet Explorer ではサポートされていません。)

increaseFontSize

選択箇所あるいは挿入点を BIG　タグで囲み、文字を大きくします。 (Internet Explorer ではサポートされていません。)

indent

選択範囲または挿入点を字下げします。

insertHorizontalRule

挿入点に水平罫線を追加します。 (選択箇所は削除されます).

insertHTML

HTML 文字列を挿入点に追加します(選択箇所は削除されます)。有効な HTML 文字列を引数として渡す必要があります。 (Internet Explorer ではサポートされていません。)

insertImage

挿入点に画像を追加します(選択箇所は削除されます)。画像の SRC 値となる URI を文字列で引数として渡す必要があります。URI は最低1文字(空白文字でも可)必要です。(Internet Explorer は、URI が null でも作成します。)

insertOrderedList

選択箇所または挿入点に序数つきリストを挿入します。

insertUnorderedList

選択箇所または挿入点に序数なしリストを挿入します。

insertParagraph

選択箇所あるいは挿入点のある行、あるいは現在の行を段落タグで囲います。 (Internet Explorer では挿入点に段落が追加され、選択箇所は削除されます。)

italic

選択箇所または挿入点の文字の斜体を切り替えます。 (Internet Explorer では　I タグではなく EM タグが使われます。)

justifyCenter

選択箇所または挿入点を中央寄せにします。

justifyLeft

選択箇所または挿入点を左寄せにします。

justifyRight

選択箇所または挿入点を右寄せにします。

outdent

選択箇所または挿入点のインデントを解除します。

paste

挿入点にクリップボードの内容をペーストします(選択箇所はペーストされた内容に置き換えられます)。設定ファイル user.js でクリップボードを使用可能にしないと使えません。参照

redo

直前のコマンドをやり直します。

removeFormat

選択された箇所のフォーマットをすべて解除します。

selectAll

編集可能範囲の内容すべてを選択します。

strikeThrough

選択箇所または挿入点の字消し線のオン・オフを切り替えます。

subscript

選択箇所または挿入点の下付き文字のオン・オフを切り替えます。

superscript

選択箇所または挿入点の上付き文字のオン・オフを切り替えます。

underline

選択箇所または挿入点のアンダーラインのオン・オフを切り替えます。

undo

最後に実行したコマンドを取り消します。

unlink

選択範囲のリンクを取り消します。

useCSS

マークアップに HTML タグを使うか CSS を使うかを切り替えます。true/false の boolean 値を引数として渡す必要があります。注: この表現は、理論的にはあべこべになっていることに気をつけてください (CSS を使う場合が false、HTML タグを使う場合が true)。(Internet Explorer ではサポートされていません。) このコマンドは推奨されません。代わりに styleWithCss コマンドを使うようにしてください。

styleWithCSS

userCSS コマンドを置き換えるものです。引数で指定したとおりの挙動をします。例えば、true を渡せば style 属性によってマークアップし、false を渡せばフォーマット要素を生成します。

Internet Explorer との相違

Mozilla と Internet Explorer designMode の挙動の大きな違いのひとつに、編集可能ドキュメントにおいて生成されるコードの違いがあります。Internet Explorer がHTML タグ (em, i など) を使用するのに対し、Mozilla 1.3 はデフォルトでは span の style 属性としてマークアップを行います。useCSS コマンドを使うと、CSS によるマークアップと HTML によるマークアップを切り替えることができます。

Figure 1 : 生成される HTML の違い

Mozilla:
<span style="font-weight: bold;">I love geckos.</span>
<span style="font-weight: bold; font-style: italic; 
    text-decoration: underline;">Dinosaurs are big.</span>

Internet Explorer:
<STRONG>I love geckos.</STRONG>
<STRONG><EM><U>Dinosaurs are big.</U></EM></STRONG>

さらに、Mozilla と IE では、designMode で主に使われる iframe 内のドキュメントオブジェクトにアクセスする方法が異なっています。Mozilla は IFrameElement.contentDocumentという W3C 標準の方式を採用していますが、IE は IFrameElement.document を利用します。

DevEdge は、 xbDesignMode という JavaScript のヘルパクラスを提供しています。このクラスは、IE と Mozilla の相違を気にせずに済むような designMode のラッパーとなっています。

イベントハンドルが無効

さらに、Mozilla には、ドキュメントが designMode になると、そのドキュメント内のイベントが無効になるという特徴があります。designMode をオフにすると(Mozilla 1.5 ではこの切り替えが可能となります)、再びイベントはアクティブになります。

さらなる情報 は、Migrate apps from Internet Explorer to Mozilla の Rich text editing の節をご覧ください。

例

注: サンプルファイルは他サイトから取り入れられています。現在これは利用できません。 --fumble 18:13, 24 Apr 2005 (PDT)

例 1

まず最初の例として、HTML 文書自身の designMode を "On" にしてみます。これにより、Mozilla 1.3 ではドキュメント全体が編集可能となります。ただし Internet Explorer では、javascript により現在のドキュメント自身の designMode を変更することができません。Internet Explorer で同様のことをするためには、body タグの contentEditable 属性を "true" にする必要があります。

Figure 2 : First example

HTML:
<body contentEditable="true" onload="load()">

JavaScript:
function load(){
  window.document.designMode = "On";
}

例 2

2つめの例は、テキストを太字/斜体/アンダーライン付きにしたり、リンクを追加したり、文字色を変更したりすることが可能な簡単なリッチテキスト編集ページです。このサンプルページは、リッチテキスト編集エリアとなる iframe から成り立っており、太字/斜体/文字色変更などが使えるようになっています。

Figure 3 : リッチテキスト編集の準備をする

HTML:
<body onload="load()">

JavaScript:
function load(){
  getIFrameDocument("editorWindow").designMode = "On";
}

function getIFrameDocument(aID){
  // if contentDocument exists, W3C compliant (Mozilla)
  if (document.getElementById(aID).contentDocument){
    return document.getElementById(aID).contentDocument;
  } else {
    // IE
    return document.frames[aID].document;
  }
}

この例には、iframe 内のドキュメントをより簡単に編集できるようにし、さらに HTML コードをきれいに保つような doRichEditCommand 関数が含まれています。この関数は、要求されたコマンドを execCommand() によって実行し、さらに編集可能ドキュメントにフォーカスを戻します。そうしないと、押したボタンにフォーカスが移ってしまい、編集作業の邪魔になってしまうからです。

Figure 4 : リッチテキスト編集コマンドを使用する

HTML:
<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>

JavaScript:
function doRichEditCommand(aName, aArg){
  getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
  document.getElementById('editorWindow').contentWindow.focus()
}

Mozilla におけるリッチテキスト編集

イントロダクション

リッチテキスト編集の準備をする

コマンドの実行

Internet Explorer との相違

例

例 1

例 2

リソース

ドキュメントのタグと貢献者