ブラウザーのWYSIWYG HTMLエディター。 パート2
これは、designModeプロパティとcontentEditableプロパティ、それらの動作と機能に関する記事の翻訳の第2部です。
この記事では、最新のブラウザーでの編集機能の統一に関する基本原則と問題について説明します。 この記事で取り上げられているトピック：
ブラウザーのWYSIWYG HTMLエディター。 パート1はこちらです。
ブラウザは多くの編集コマンドをサポートしています。 これらのコマンドで生成されるHTMLは標準化されておらず、ブラウザーごとに異なります。 たとえば、IEでは、「太字」はコードを生成します。
コードは、少なくともIEでは、やや時代遅れです。 多くのコマンドは、ひどいフォントタグを使用します。
生成されたマークアップは有効なXHTMLではなく、原則として有効なHTMLコードでもありません。
Operaは、フォントタグなどを使用してIEと同様のコードを生成します（完全ではありません）。
Safariは、スパンとインラインCSSを使用してフォーマットを生成します。 Safariアプローチの利点は、少なくとも有効なHTML 4.01 Strictであることです。
Mozillaは2つの動作モードをサポートしています-IE / Operaのようなプレゼンテーションタグを生成するか、Safariのようなコンテナを様式化します。
有効なHTMLコードが必要なことが確実な場合は、エディターからサーバー生成コードを消去して、この混乱から有効な（X）HTMLを取得する必要があります。 （まあ、とにかくこれを行ってXSS攻撃を避ける必要があります）。
ホットキーの組み合わせで多くのコマンドを使用できます。たとえば、Ctrl / Cmd + Bは太字、Ctrl / Cmd + Zは最後のアクションを取り消すなどです。 ただし、これらの組み合わせは、ブラウザの場所によって異なる場合があります。
割り当てられたキーボードショートカットは変更できませんが、キーボードイベントキャプチャスクリプトを使用して書き換えることができます。
ユーザーが編集コマンドを使用できるようにコントロールパネルを作成することもできます。 これは、エディターAPIを使用して実行できます。 このAPIは、通常のDOM APIとは異なり、実際には、コントロールパネルを同期してドキュメントを編集するためにMicrosoftが使用するCOMインターフェイスであるIOleCommandTargetインターフェイスのスクリプト適応です。
APIはドキュメントオブジェクトにあり、execCommandメソッドと、コマンドに関する情報を返すクエリプレフィックスを持ついくつかのメソッドで構成されています。
すべてのメソッドは、コマンドIDを最初の引数として受け入れます。これは、コマンドの名前を含む文字列です。 実際には、メソッド：
現在の選択に関連してコマンドを実行します。 一部のコマンドは、コンテキストに応じて状態を切り替えます。 たとえば、「太字」コマンドを既に太字スタイルの選択範囲に適用すると、選択範囲は通常のスタイルで表示されます。 一部のコマンドには引数があります。たとえば、forecolorには引数としてカラーコードが必要です。
一部のコマンドはモーダルダイアログを呼び出します。たとえば、linkコマンドは、URLの入力を求めるダイアログを呼び出します。 ダイアログは変更できませんが、置き換えることは可能です。 例：
コマンド：文字列; チーム名。
useDialog：ブール型。 組み込みダイアログを表示するかどうか（すべてのコマンドがダイアログを呼び出すことができるわけではありません）。
value：コマンドが受け入れる値。 すべてのコマンドが値を受け入れるわけではありません。 ダイアログが呼び出されると、そこから値が取得されます。
結果：コマンドが実行される場合はtrue、ユーザーによってキャンセルされる（ダイアログを閉じる）場合、またはコマンドを実行できない場合はfalse。
選択範囲がない（カーソルのみ）場合、テキストの書式設定コマンドはブラウザに応じて異なる方法で適用されます。 カーソルが単語内にある場合、IEはその単語にフォーマットを適用します。 他のブラウザは次の文字にそれを適用し、カーソルが後方に動かされない場合は入力されます。
Queryコマンドを使用して、現在の選択とカーソルの位置に応じてコントロールパネルのボタンの状態を判断することは理にかなっています。
コマンドを現在の選択に適用できるかどうかを決定します。 たとえば、「リンク解除」は、カーソルがリンク内にある場合にのみ適用できます。 選択範囲に編集できない領域が含まれている場合、コマンドは実行されません。
コマンドが選択範囲に適用されたかどうかを示します。つまり、選択範囲が太字の場合、QueryCommandStateは太字のコマンドに対してtrueを返します。
ハイライトするコマンドの値を返します。 値は、execCommandを使用するときに設定される値に対応します。たとえば、ForeColorの場合は、現在の選択範囲の（文字列としての）カラーコードになります。
形式はブラウザによって異なります。 たとえば、ForeColorはIEで16進値（＃ff0000など）を返しますが、他の場合はRgb（255,0,0）などのRGB式を返します。
一部の値は、ブラウザーのローカライズによって異なります。たとえば、IEのFormatBlockの値は、ブラウザーインターフェイスのローカライズ言語で段落の名前を返します。
太字などの値がないコマンドは、単にfalseを返します。 （APIには、queryCommandSupportedとqueryCommandIndeterminateの2つの追加メソッドが含まれていますが、これらは少なくともバグを使用するにはあまりにもバグがあります。）
組み込みコマンドは便利ですが、動作を変更したり、カスタム実装を追加したりすることはできません。 Range and Selection APIを使用すると、カスタムコマンドの実装に使用できる任意のHTML変換を使用できます。
問題は、DOMに影響を与える変換がUndoスタックを破壊することです。Undoスタックは、UnDo / ReDoコマンドの実装に使用されます。 これはあまり良いことではありませんが、非標準チームにとっては許容できる価格です。
範囲/選択APIには2つの主要なクラスがあります。
範囲-ドキュメント文字の連続した範囲。 範囲は、要素の境界に重なる場合があります。 範囲には開始点と終了点があります。 開始点が終了点と一致する場合、範囲は縮退と呼ばれます。
選択-ドキュメント内の現在のユーザー選択を表します。 選択範囲には1つの強調表示された範囲が含まれます。 選択範囲が縮退している場合、カーソルとして表示されます。 （範囲と選択は、編集モードの要素の外で使用できます。読み取り専用ドキュメントで選択を作成できます。ただし、要素が編集モードの場合にのみカーソルが表示されるため、そのような選択を縮退することはできません。）
これらの原則はすべてのブラウザーで同じですが、API自体はIEと他のすべてのブラウザーでの実装が異なります。 IEは、範囲m選択APIに独自の独自のソリューションを使用し、他のブラウザは、非標準化選択APIと組み合わせてW3C DOM Range APIを使用します。
主な違いは、IEでは、範囲のコンテンツがHTMLマークアップ付きの文字列として利用できることです。 W3C DOM Range APIでは、範囲のコンテンツはDOMノードのツリーとして利用できます。
さまざまなアプローチを示すために、現在の選択に「code」タグを適用するコマンドを次に示します。
IEの場合（editWindowはdesignModeのフレームへのリンクです）：
IEはコントロールの強調表示をサポートしています。これは通常の範囲の強調表示とは異なります。 画像、フォームコントロール、テーブルフレームなどのオブジェクトをクリックすると、コントロールが強調表示されます。
IEでは、ctrl +クリックの組み合わせを使用して、複数の要素を同時に選択することができます。 他のブラウザは、コントロールを強調表示する概念をサポートしていません。 他のブラウザでは、強調表示は常にテキスト範囲です。
この記事では、ブラウザーでデータを編集する基本的な原則について説明します。 記事のパート2では、上記のAPIのアプリケーションの多くの例を示しています。
翻訳者から：これが私だけでなく興味深い場合は、 2番目の記事を翻訳します 。
また、追加資料へのリンク：
この記事では、最新のブラウザーでの編集機能の統一に関する基本原則と問題について説明します。 この記事で取り上げられているトピック：
- さまざまな編集モードがメソッドを有効にします
- 編集コマンド
- 編集中に生成されるHTML
- DOMインタラクション
ブラウザーのWYSIWYG HTMLエディター。 パート1はこちらです。
編集コマンド
ブラウザは多くの編集コマンドをサポートしています。 これらのコマンドで生成されるHTMLは標準化されておらず、ブラウザーごとに異なります。 たとえば、IEでは、「太字」はコードを生成します。
Safariは以下を生成します。
- < 強い >こんにちは！ < / 強い >
- < span class = "Apple-style-span" style = "font-weight：bold;" >こんにちは！ < / スパン >
コードは、少なくともIEでは、やや時代遅れです。 多くのコマンドは、ひどいフォントタグを使用します。
- < フォントの 色 = ＃ff0000> 23 < / / フォント >
生成されたマークアップは有効なXHTMLではなく、原則として有効なHTMLコードでもありません。
Operaは、フォントタグなどを使用してIEと同様のコードを生成します（完全ではありません）。
Safariは、スパンとインラインCSSを使用してフォーマットを生成します。 Safariアプローチの利点は、少なくとも有効なHTML 4.01 Strictであることです。
Mozillaは2つの動作モードをサポートしています-IE / Operaのようなプレゼンテーションタグを生成するか、Safariのようなコンテナを様式化します。
有効なHTMLコードが必要なことが確実な場合は、エディターからサーバー生成コードを消去して、この混乱から有効な（X）HTMLを取得する必要があります。 （まあ、とにかくこれを行ってXSS攻撃を避ける必要があります）。
ホットキーボードショートカット
ホットキーの組み合わせで多くのコマンドを使用できます。たとえば、Ctrl / Cmd + Bは太字、Ctrl / Cmd + Zは最後のアクションを取り消すなどです。 ただし、これらの組み合わせは、ブラウザの場所によって異なる場合があります。
割り当てられたキーボードショートカットは変更できませんが、キーボードイベントキャプチャスクリプトを使用して書き換えることができます。
エディターAPI
ユーザーが編集コマンドを使用できるようにコントロールパネルを作成することもできます。 これは、エディターAPIを使用して実行できます。 このAPIは、通常のDOM APIとは異なり、実際には、コントロールパネルを同期してドキュメントを編集するためにMicrosoftが使用するCOMインターフェイスであるIOleCommandTargetインターフェイスのスクリプト適応です。
APIはドキュメントオブジェクトにあり、execCommandメソッドと、コマンドに関する情報を返すクエリプレフィックスを持ついくつかのメソッドで構成されています。
すべてのメソッドは、コマンドIDを最初の引数として受け入れます。これは、コマンドの名前を含む文字列です。 実際には、メソッド：
execcommand
現在の選択に関連してコマンドを実行します。 一部のコマンドは、コンテキストに応じて状態を切り替えます。 たとえば、「太字」コマンドを既に太字スタイルの選択範囲に適用すると、選択範囲は通常のスタイルで表示されます。 一部のコマンドには引数があります。たとえば、forecolorには引数としてカラーコードが必要です。
一部のコマンドはモーダルダイアログを呼び出します。たとえば、linkコマンドは、URLの入力を求めるダイアログを呼び出します。 ダイアログは変更できませんが、置き換えることは可能です。 例：
何が：
- 結果=ドキュメント。 execCommand （ command 、 useDialog 、 value ）
コマンド：文字列; チーム名。
useDialog：ブール型。 組み込みダイアログを表示するかどうか（すべてのコマンドがダイアログを呼び出すことができるわけではありません）。
value：コマンドが受け入れる値。 すべてのコマンドが値を受け入れるわけではありません。 ダイアログが呼び出されると、そこから値が取得されます。
結果：コマンドが実行される場合はtrue、ユーザーによってキャンセルされる（ダイアログを閉じる）場合、またはコマンドを実行できない場合はfalse。
選択範囲がない（カーソルのみ）場合、テキストの書式設定コマンドはブラウザに応じて異なる方法で適用されます。 カーソルが単語内にある場合、IEはその単語にフォーマットを適用します。 他のブラウザは次の文字にそれを適用し、カーソルが後方に動かされない場合は入力されます。
クエリコマンド
Queryコマンドを使用して、現在の選択とカーソルの位置に応じてコントロールパネルのボタンの状態を判断することは理にかなっています。
QueryCommandEnabled
コマンドを現在の選択に適用できるかどうかを決定します。 たとえば、「リンク解除」は、カーソルがリンク内にある場合にのみ適用できます。 選択範囲に編集できない領域が含まれている場合、コマンドは実行されません。
QueryCommandState
コマンドが選択範囲に適用されたかどうかを示します。つまり、選択範囲が太字の場合、QueryCommandStateは太字のコマンドに対してtrueを返します。
QueryCommandValue
ハイライトするコマンドの値を返します。 値は、execCommandを使用するときに設定される値に対応します。たとえば、ForeColorの場合は、現在の選択範囲の（文字列としての）カラーコードになります。
形式はブラウザによって異なります。 たとえば、ForeColorはIEで16進値（＃ff0000など）を返しますが、他の場合はRgb（255,0,0）などのRGB式を返します。
一部の値は、ブラウザーのローカライズによって異なります。たとえば、IEのFormatBlockの値は、ブラウザーインターフェイスのローカライズ言語で段落の名前を返します。
太字などの値がないコマンドは、単にfalseを返します。 （APIには、queryCommandSupportedとqueryCommandIndeterminateの2つの追加メソッドが含まれていますが、これらは少なくともバグを使用するにはあまりにもバグがあります。）
範囲および選択API
組み込みコマンドは便利ですが、動作を変更したり、カスタム実装を追加したりすることはできません。 Range and Selection APIを使用すると、カスタムコマンドの実装に使用できる任意のHTML変換を使用できます。
問題は、DOMに影響を与える変換がUndoスタックを破壊することです。Undoスタックは、UnDo / ReDoコマンドの実装に使用されます。 これはあまり良いことではありませんが、非標準チームにとっては許容できる価格です。
範囲/選択APIには2つの主要なクラスがあります。
範囲-ドキュメント文字の連続した範囲。 範囲は、要素の境界に重なる場合があります。 範囲には開始点と終了点があります。 開始点が終了点と一致する場合、範囲は縮退と呼ばれます。
選択-ドキュメント内の現在のユーザー選択を表します。 選択範囲には1つの強調表示された範囲が含まれます。 選択範囲が縮退している場合、カーソルとして表示されます。 （範囲と選択は、編集モードの要素の外で使用できます。読み取り専用ドキュメントで選択を作成できます。ただし、要素が編集モードの場合にのみカーソルが表示されるため、そのような選択を縮退することはできません。）
これらの原則はすべてのブラウザーで同じですが、API自体はIEと他のすべてのブラウザーでの実装が異なります。 IEは、範囲m選択APIに独自の独自のソリューションを使用し、他のブラウザは、非標準化選択APIと組み合わせてW3C DOM Range APIを使用します。
主な違いは、IEでは、範囲のコンテンツがHTMLマークアップ付きの文字列として利用できることです。 W3C DOM Range APIでは、範囲のコンテンツはDOMノードのツリーとして利用できます。
範囲の例
さまざまなアプローチを示すために、現在の選択に「code」タグを適用するコマンドを次に示します。
IEの場合（editWindowはdesignModeのフレームへのリンクです）：
Mozillaの場合：
- var rng = editWindow。 文書 選択 createRange （ ） ;
- rng。 pasteHTML （ "" + rng。htmlText + "" ） ;
- var rng = editWindow。 getSelection （ ） 。 getRangeAt （ 0 ） ;
- rng。 サラウンド コンテンツ （ document。createElement （ "code" ） ） ;
強調表示コントロール
IEはコントロールの強調表示をサポートしています。これは通常の範囲の強調表示とは異なります。 画像、フォームコントロール、テーブルフレームなどのオブジェクトをクリックすると、コントロールが強調表示されます。
IEでは、ctrl +クリックの組み合わせを使用して、複数の要素を同時に選択することができます。 他のブラウザは、コントロールを強調表示する概念をサポートしていません。 他のブラウザでは、強調表示は常にテキスト範囲です。
結論
この記事では、ブラウザーでデータを編集する基本的な原則について説明します。 記事のパート2では、上記のAPIのアプリケーションの多くの例を示しています。
翻訳者から：これが私だけでなく興味深い場合は、 2番目の記事を翻訳します 。
また、追加資料へのリンク：
All Articles