ブラウザーのWYSIWYG HTMLエディター。 パート1
これは、designModeプロパティとcontentEditableプロパティ、それらの動作と機能に関する記事の翻訳の最初の部分です。
この記事では、最新のブラウザーでの編集機能の統一に関する基本原則と問題について説明します。 この記事で取り上げられているトピック：
1990年にTim Bernes-Leeによって作成された最初のブラウザでは、WebページをWYSIWYGモードのブラウザで直接編集できました。 Webは、読み取りおよび書き込み可能なメディアと見なされていました。 ただし、後のブラウザでは、フォーム入力フィールドにテキストを入力することを除いて、主に読み取り専用機能が提供されました。
Internet Explorer 5のリリースでは、ブラウザーでのWYSIWYG編集が再び標準になりました。新しいdesignModeプロパティにより、ユーザーはドキュメント全体を編集できました。 当初、この機能は見過ごされていました。おそらく、Windows OSでのみ利用可能な、IEの独自機能である他の非標準のホストとともに登場したためです。
近年、他の競合ブラウザ-Mozilla、Safari、Opera（ 翻訳者注：この記事の執筆時点ではChromeはまだ登場していません。最初のベータ版は数か月後にリリースされる予定です ）-IEの例に続き、この機会を実現しました。 WHATWGは編集モードの標準化に取り組んでいます。designModeおよびcontentEditableプロパティはHTML 5で提供されています。WYSIWYGブラウザーの編集は依然としてWebの不可欠な部分になりつつあるようです。
この記事では、最新のブラウザーでの編集機能の統一に関する基本原則と問題について説明します。 この記事で取り上げられているトピック：
注：ブラウザの編集機能のみを検討します。Opera9.5、Firefox 2 +、Safari 3、以前のバージョンではエディターがグリッチで劣っていたためです。 IEのエディターは実質的にバージョン5.5から変更されていません）））
編集モードでは、ページまたはその一部を編集可能にします。 これは、次の事実で表されます。
編集モードを有効にするには、designModeプロパティとcontentEditableプロパティの2つの方法があります。
ドキュメントオブジェクトのdesignModeプロパティをtrueに設定すると、ウィンドウまたはフレームが編集可能になります。 （免責事項：IEでは、ウィンドウオブジェクトからドキュメントリンクを取得する必要があります。）通常、編集可能なブロックはIFrameとdesignModeを使用して作成されます。
contentEditableプロパティをtrueに設定することにより、テキストを含む要素を編集可能にすることができます。 （contentEditableはFirefox 2ではサポートされていませんが、Firefox 3でサポートが登場しました。IE、Opera、およびSafariの現在のすべてのバージョンでも利用可能です。）
キーボードとマウスの編集は、単純なテキストエディターから期待されるように、ほぼ機能します。 カーソルはドキュメントエントリポイントを示し、ドキュメント全体を移動できます。 入力と削除は非常に予想通りに機能します。 選択は移動、削除、上書きできます。
非常に便利な機能-デフォルトでは、やり直しと取り消し（アクションの書き込みとキャンセル）が機能します。 （Undoコマンドの呼び出し方法については後で説明します。）
難易度はEnter / Returnボタンが押されると始まります。 どのような種類のHTMLコードが結果になるかは明確ではありません。実際、このコードはブラウザによって大きく異なり、コンテキストに依存します。 カーソルが空でないpタグ内にある場合、すべてのブラウザーはそれを閉じて、新しい（同じ属性を持つ）タグを開き、カーソルをその中に移動します。 また、Mozillaはカーソルの後に（冗長な）br要素を挿入します。 例（例では、垂直バーはカーソルを意味します）：
IEまたはSafariでEnter / Returnを押します。
カーソルが空でないh1要素の最後にある場合、すべてのブラウザーはh1を閉じますが、IEとOperaは新しいp要素を挿入し、その中にカーソルを置きます。 Safariは新しいh1要素を挿入し、カーソルを内部に配置します。 Mozillaは追加要素を作成しませんが、何らかの理由でカーソルの後に2つの追加brタグを追加します。 例：
IEまたはOperaでEnter / Returnを押した後：
Mozillaの場合：
そしてサファリでは：
div内にテキストを入力すると、Safari、Opera、およびIEは現在のdiv要素を閉じて新しいdiv要素を開きます。 Mozillaはbrを挿入し、その後にカーソルを置きます。
カーソルの周囲に複数のラッパー要素がある場合、すべてのブラウザーは、ネストの度合いが最も高いラッパーのみを閉じます（そして複製します）。 カーソルはラッパーに残ります。
注：これは不気味です！ 予想外に、IEは最も賢明なアプローチであることが判明し、常にブロック要素の意味のある使用を保証しました。 Mozillaはブロック要素内でbr要素を使用してひどく振る舞い、意味のあるテキストスタイリングを実装することを不可能にします。
カーソルは文字間を移動します。 タグに対してカーソルがどのように配置されているかは見えません。 移動のロジックは、ブラウザに関係なく変更されません。 ブロック要素に関して：カーソルは常に、ネストが最も大きいブロック要素内に配置されます。 たとえば、2つの段落の間にカーソルを置くことはできません。
たとえば、こちらをご覧ください。 垂直バーは、可能なカーソル位置を示します。
段落の境界線を削除すると、結果は変更されません。左のブロックが「勝ち」、右のブロックの内容が左に含まれます。
ただし、Safariはスマートに（または視点によっては恐ろしく）動作し、適切な要素のビューを変更しません。
ブラウザは、編集用の追加のインターフェイスをサポートしています。
IEでは、角をドラッグすることで、画像、表、フォーム要素、または絶対配置要素のサイズを変更できます（オブジェクトを選択すると、対応するコンテナが表示されます）
Mozillaでは、画像と表のサイズを変更することもできますが、表に新しい列と行を作成できる追加のコントロールもあります。 さらに、Mozillaでは、絶対に配置された要素の位置を変更できます。
これらすべての管理インターフェイスは完全に独自のものであり、ブラウザごとに異なり、構成することはできません。
翻訳者から： Habrは一度に35kbのテキストの発行を拒否したため、翻訳を2つの部分に分けます。
ブラウザーのWYSIWYG HTMLエディター。 パート2
この記事では、最新のブラウザーでの編集機能の統一に関する基本原則と問題について説明します。 この記事で取り上げられているトピック：
- さまざまな編集モードがメソッドを有効にします
- 編集コマンド
- 編集中に生成されるHTML
- DOMインタラクション
エントリー
1990年にTim Bernes-Leeによって作成された最初のブラウザでは、WebページをWYSIWYGモードのブラウザで直接編集できました。 Webは、読み取りおよび書き込み可能なメディアと見なされていました。 ただし、後のブラウザでは、フォーム入力フィールドにテキストを入力することを除いて、主に読み取り専用機能が提供されました。
Internet Explorer 5のリリースでは、ブラウザーでのWYSIWYG編集が再び標準になりました。新しいdesignModeプロパティにより、ユーザーはドキュメント全体を編集できました。 当初、この機能は見過ごされていました。おそらく、Windows OSでのみ利用可能な、IEの独自機能である他の非標準のホストとともに登場したためです。
近年、他の競合ブラウザ-Mozilla、Safari、Opera（ 翻訳者注：この記事の執筆時点ではChromeはまだ登場していません。最初のベータ版は数か月後にリリースされる予定です ）-IEの例に続き、この機会を実現しました。 WHATWGは編集モードの標準化に取り組んでいます。designModeおよびcontentEditableプロパティはHTML 5で提供されています。WYSIWYGブラウザーの編集は依然としてWebの不可欠な部分になりつつあるようです。
この記事では、最新のブラウザーでの編集機能の統一に関する基本原則と問題について説明します。 この記事で取り上げられているトピック：
- さまざまな編集モードがメソッドを有効にします
- 編集コマンド
- 編集中に生成されるHTML
- DOMインタラクション
注：ブラウザの編集機能のみを検討します。Opera9.5、Firefox 2 +、Safari 3、以前のバージョンではエディターがグリッチで劣っていたためです。 IEのエディターは実質的にバージョン5.5から変更されていません）））
編集モードの概要
編集モードでは、ページまたはその一部を編集可能にします。 これは、次の事実で表されます。
- カーソルは現在のエントリポイントを示します。 ユーザーはテキストを入力したり、削除したりできます。 キーボードまたはマウスを使用します。
- 一部のブラウザには、画像、表、絶対配置要素を変更および移動できるインターフェイスが用意されています。
- 多くの組み込みコマンドがあります-太字、斜体、InsertLink、Paste、Undoなど。 （太字、斜体、リンクの貼り付け、クリップボードからの貼り付け、アクションの取り消しなど）。これらのコマンドは、ホットキーの組み合わせまたは対応するAPIを使用したスクリプトを使用して呼び出すことができます。
- Range and Selection APIを使用して、HTMLへの変更を実装できます。 これを使用して、カスタムコマンドを実装できます。
- 編集モードでは、HTMLを変更できます。 そしてそれだけです。 たとえば、変更を保存するためにサーバーに送信する場合は、適切なスクリプトを作成する必要があります。
- エディターのコマンドと動作はほとんど仕様で説明されておらず、結果のHTMLコードはブラウザーによって大きく異なります。
- IE 5.5（2000）のリリース以降、IEでの実装に大きな変化はありません。 生成されるHTMLコードは、敏感な人を大いに怖がらせることができます。 あなたがずっと前にあなたの人生で最後のフォントタグを見たと思うなら、驚きが待っています！ （ 翻訳者のメモ：ウーアンドアンドアンドアンドアンドアンドアンドアンドアンド！ ）
編集モードを有効にする
編集モードを有効にするには、designModeプロパティとcontentEditableプロパティの2つの方法があります。
ドキュメントオブジェクトのdesignModeプロパティをtrueに設定すると、ウィンドウまたはフレームが編集可能になります。 （免責事項：IEでは、ウィンドウオブジェクトからドキュメントリンクを取得する必要があります。）通常、編集可能なブロックはIFrameとdesignModeを使用して作成されます。
contentEditableプロパティをtrueに設定することにより、テキストを含む要素を編集可能にすることができます。 （contentEditableはFirefox 2ではサポートされていませんが、Firefox 3でサポートが登場しました。IE、Opera、およびSafariの現在のすべてのバージョンでも利用可能です。）
キーボード編集
キーボードとマウスの編集は、単純なテキストエディターから期待されるように、ほぼ機能します。 カーソルはドキュメントエントリポイントを示し、ドキュメント全体を移動できます。 入力と削除は非常に予想通りに機能します。 選択は移動、削除、上書きできます。
非常に便利な機能-デフォルトでは、やり直しと取り消し（アクションの書き込みとキャンセル）が機能します。 （Undoコマンドの呼び出し方法については後で説明します。）
難易度はEnter / Returnボタンが押されると始まります。 どのような種類のHTMLコードが結果になるかは明確ではありません。実際、このコードはブラウザによって大きく異なり、コンテキストに依存します。 カーソルが空でないpタグ内にある場合、すべてのブラウザーはそれを閉じて、新しい（同じ属性を持つ）タグを開き、カーソルをその中に移動します。 また、Mozillaはカーソルの後に（冗長な）br要素を挿入します。 例（例では、垂直バーはカーソルを意味します）：
- < p > bla bla | < / p >
IEまたはSafariでEnter / Returnを押します。
- < p > bla bla < / / p >
- < p > | < / p >
カーソルが空でないh1要素の最後にある場合、すべてのブラウザーはh1を閉じますが、IEとOperaは新しいp要素を挿入し、その中にカーソルを置きます。 Safariは新しいh1要素を挿入し、カーソルを内部に配置します。 Mozillaは追加要素を作成しませんが、何らかの理由でカーソルの後に2つの追加brタグを追加します。 例：
- < h1 > bla bla | < / h1 >
IEまたはOperaでEnter / Returnを押した後：
- < h1 > bla bla < / / h1 >
- < p > | < / p >
Mozillaの場合：
- < h1 > bla bla < / / h1 >
- | <br>
そしてサファリでは：
本文（ラッパー要素なし）に直接テキストを書いてEnter / Returnを押すと、Mozillaはbrを挿入します。 IEとOperaは以前のテキストをpでラップし、新しいpを作成します。 Safariがdivを挿入します。
- < h1 > bla bla < / / h1 >
- < h1 > | < / h1 >
div内にテキストを入力すると、Safari、Opera、およびIEは現在のdiv要素を閉じて新しいdiv要素を開きます。 Mozillaはbrを挿入し、その後にカーソルを置きます。
カーソルの周囲に複数のラッパー要素がある場合、すべてのブラウザーは、ネストの度合いが最も高いラッパーのみを閉じます（そして複製します）。 カーソルはラッパーに残ります。
注：これは不気味です！ 予想外に、IEは最も賢明なアプローチであることが判明し、常にブロック要素の意味のある使用を保証しました。 Mozillaはブロック要素内でbr要素を使用してひどく振る舞い、意味のあるテキストスタイリングを実装することを不可能にします。
カーソル位置
カーソルは文字間を移動します。 タグに対してカーソルがどのように配置されているかは見えません。 移動のロジックは、ブラウザに関係なく変更されません。 ブロック要素に関して：カーソルは常に、ネストが最も大きいブロック要素内に配置されます。 たとえば、2つの段落の間にカーソルを置くことはできません。
たとえば、こちらをご覧ください。 垂直バーは、可能なカーソル位置を示します。
テキスト要素に関して、カーソルがテキストの左側にある場合、カーソルはすべてのラッパーの外側に配置されます。 右端にある場合は、ラッパー内に配置されます。 例：
- < p > | P | 1 | < / p > < p > | P | 2 | < / p >
- < div > < p > | P | 3 | < / p > < div > < p > | P | 4 | < / p > < / div > < / div >
したがって、太字のテキストの左側に文字を入力すると、新しいテキストは通常のスタイルで表示されます。 右側に入力すると、太字になります。
- < p > | A | < 強い > < em > B | < / strong > < / em > C | < / p >
削除する
段落の境界線を削除すると、結果は変更されません。左のブロックが「勝ち」、右のブロックの内容が左に含まれます。
Bk Spを押すと、以下が表示されます。
- < h1 >オーバースクリフ< / / h1 > < p > |テキスト< / p >
- < h1 >オーバースクリフ|テキスト< / h1 >
ただし、Safariはスマートに（または視点によっては恐ろしく）動作し、適切な要素のビューを変更しません。
- < h1 >オーバースクリフ| < span class = "Apple-style-span" style = "font-size：16px; font-weight：normal;" >テキスト< / スパン > < / / h1 >
オブジェクトの編集
ブラウザは、編集用の追加のインターフェイスをサポートしています。
IEでは、角をドラッグすることで、画像、表、フォーム要素、または絶対配置要素のサイズを変更できます（オブジェクトを選択すると、対応するコンテナが表示されます）
Mozillaでは、画像と表のサイズを変更することもできますが、表に新しい列と行を作成できる追加のコントロールもあります。 さらに、Mozillaでは、絶対に配置された要素の位置を変更できます。
これらすべての管理インターフェイスは完全に独自のものであり、ブラウザごとに異なり、構成することはできません。
翻訳者から： Habrは一度に35kbのテキストの発行を拒否したため、翻訳を2つの部分に分けます。
ブラウザーのWYSIWYG HTMLエディター。 パート2
All Articles