開発者ツール · HTML WYSIWYG エディター
execCommand が非推奨になった理由とブラウザ エディタが代わりに使用するもの
· 仕組み
html コンテンツ編集可能 開発者ワークフロー
document.execCommand の隆盛と衰退、その出力が一貫性を持たなかった理由、および代わりに最新のエディターが Selection、Range、および beforeinput をどのように構築するかについて説明します。
安全ではなくなった 1 行の太字ボタン — execCommand('bold') と非推奨の警告で開きます
太字のボタンは 1 回の呼び出しです。編集面にフォーカスし、`document.execCommand` に現在の選択範囲に `bold` を適用するよう依頼します。 ToolAcre は引き続きそのパスを使用します。これは、ブラウザーが contenteditable 要素内のキャレットと選択範囲を所有しているためです。コンパクト呼び出しは便利ですが、便利だからといって、結果のツリーが予測可能になるわけではありません。
コードは、拒否を通常の可能性として扱います。そのコマンド ラッパーは例外をキャッチし、ブラウザーがアクションを拒否したことを通知し、ライターをソース モードに指示します。このフォールバックは、ツールバーの 1 回のクリックで常に 1 つの特定の要素が生成されるか、すべてのエンジンで同じように動作することを約束するよりも正直です。
execCommand の機能とその起源 - 初期の Internet Explorer でのその起源とすべてのブラウザでの採用について説明します
同じラッパーは、太字、斜体、順序なしおよび順序付きリスト、書式設定の削除、元に戻す、やり直し、ブロック書式設定、リンクおよびリンク解除を実行します。これらは実際にツールバーに存在するコマンドです。この記事では、配置、色、フォント、表、画像、または実装では決して公開されないその他のよく知られたリッチ テキスト機能を使用してリストを拡張するものではありません。
すべてのコマンドは、ライブ編集可能な DOM に対して実行されます。その後、パネルはソース、プレビュー、単語カウント、および現在の innerHTML からの削除レポートを更新します。したがって、保存された結果はコマンド ログではありません。これは、ブラウザーが要求された操作を実行または拒否した後に残した構造のフィルター処理されたシリアル化です。
コマンド API が非推奨になった理由: ブラウザーはさまざまな DOM 形状を生成できる
API はエディター作成者に各変異に対する正確な構造規約を提供しないため、非推奨が重要になります。 ToolAcre の制限は、特に入れ子になったリストに関して、エンジン間で動作が異なることを明示的に警告しています。表示可能なリストは、そのネストまたはラッパーの選択が他のブラウザーで生成されたマークアップとは異なる場合でも許容される場合があります。
すべてのブラウザー、バージョン、またはコマンドに特定の互換性結果があるという主張をサポートするリポジトリ ソースはありません。安全なステートメントはより狭く、この実装は非推奨の API を呼び出し、拒否をキャッチし、エスケープ ハッチとして直接ソース編集を提供します。マトリックスを推定するのではなく、使用する予定のブラウザーと操作をテストします。
選択と範囲は関連する代替手段ですが、このツールはそれらを実装しません
選択と範囲は、選択された DOM 境界を記述し、明示的なツリー操作をサポートできますが、ToolAcre はそれらを使用する置換フォーマット エンジンを実装しません。これらの API に現在のコード パスであるかのように名前を付けると、製品を誤って説明することになります。ここで、ブラウザ コマンドはミューテーターのままで、サニタイザーは出力境界のままです。
カスタム モデルはマーク、ブロック、トランザクション、選択マッピングを所有できますが、それは異なるテストを伴う異なる製品アーキテクチャです。この軽量エディタは、そのような機構の主張を意図的に避けています。そのレビュー可能な契約は、視覚的なアクションによってブラウザー依存の DOM が作成される可能性がある一方、ソース モードでは実際にコピーまたはダウンロードされるフィルター処理されたマークアップが表示されるというものです。
beforeinput はこのエディタの書式設定パスの一部ではありません
実装では、編集意図をカスタム トランザクションに変換するために `beforeinput` をインターセプトしません。入力イベントは、ブラウザーがサーフェスを変更した後に更新をトリガーするだけです。ペーストとドロップは例外です。これらのイベントは阻止され、クリップボードまたは転送ペイロードはフィルタリングされ、結果の HTML またはプレーン テキストのみが挿入されます。
この区別により、広範なアーキテクチャ上の主張が妨げられます。 ToolAcre はペースト ゲートを所有していますが、すべてのキーストロークの変更を所有しているわけではありません。通常の入力、削除、Enter 動作、およびツールバー コマンドはブラウザーの編集操作のままです。サニタイザーはシリアル化された出力をレビューします。エディターを beforeinput 主導のフレームワークに変えたり、すべての中間 DOM 変更を正規化したりすることはありません。
実用的な例: このエディターが実際に生成する従来のコマンド出力を検査する
具体的なチェックを行うには、2 つの短い文を入力し、1 つのフレーズを選択して太字を押します。 HTML ソースに切り替えて、そのフレーズの周囲の要素を調べます。 ToolAcre はサニタイズ中に従来の `b` を `strong` にマップするため、ライブ編集コマンドが最初に従来のタグを選択した場合でも、フィルター処理された結果はセマンティックになる可能性があります。
リストを繰り返して元に戻します。ツールバーは `insertUnorderedList` と `undo` を送信します。個別のアプリケーション履歴は保持されません。ブラウザが拒否した場合は、ステータス領域にその旨が表示されます。ネストが奇妙に見える場合は、ソース モードがサポートされている修正パスです。ボタンのラベルではなく、観察された出力が証拠です。
これでカバーされない内容: ここでは代替エディター アーキテクチャは実装されていません。
この記事は、最新の代替コマンド システム、協調トランザクション、決定論的なクロスブラウザ ツリー、またはカスタム Undo スタックのサポートを主張するものではありません。また、ソースはショートカット レジストリではなくツールバーのアクションを定義するため、キーボード ショートカットの動作は推論されません。サポートされていない機能は、暗黙の機能ではなく省略されたままになります。
セキュリティはコマンドの選択とは別のものです。ホワイトリストは発行されたマークアップをフィルターし、プレビューはスクリプトなしでサンドボックス化されますが、サニタイザーは一般的な敵対的な入力 XSS フィルターとしての使用を明示的に拒否します。信頼できない出版コンテンツを受け入れるサーバーには、サーバー側の適切な HTML5 パーサー サニタイザーと宛先固有のポリシーが必要です。
要点: コマンドではなく DOM を所有する — 移行パスと、結果のマークアップが WYSIWYG から HTML へのツールでどのように検査されるかを要約します。
検査できる結果を所有します。このエディターでは、コマンドがブラウザーに contenteditable ツリーを変更するよう要求し、ホワイトリストがそのツリーのシリアル化をサポートされているサブセットに書き換えます。ソース モードはハンドオフを公開し、ブラウザの編集動作が不便または一貫性がない場合に実用的な修復面を提供します。
実際の作業と同じブラウザで使い捨てサンプルを使用します。付属のコマンドのみを実行し、リンクとネストを検査し、それに依存する前に元に戻すテストを行い、フィルタリングされた HTML を読み取った後にのみコピーします。このワークフローは、ToolAcre が基礎となる編集 API をすでに置き換えたように見せることなく、非推奨を尊重しています。