web-dev-qa-db-ja.com

document.execCommandに代わるものはありますか？ （またはdocument.execCommandを使用しても安全ですか？）

バニラJavaScriptを使用してアマチュアリッチテキストエディターを構築しています。テキストエディターのコア機能を有効にするには、document.execCommand（）が不可欠です。

たとえば、太字、斜体、順序なしのリストコマンド：

Array.from(toolbarBtn).forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.preventDefault();
    if (e.target.id === "toolbar__btn--bold") {
      format('bold');
    }
    if (e.target.id === "toolbar__btn--italic") {
      format('italic');
    }
    if (e.target.id === "toolbar__btn--unorderedlist") {
      format('insertunorderedlist');
    }
});
});

ただし、MDN Webドキュメントでこのコマンドを検索すると、このコマンドは廃止されていると見なされていることがわかりました。

廃止 この機能は廃止されました。一部のブラウザでは引き続き機能する可能性がありますが、いつでも削除できるため、使用は推奨されません。使用しないようにしてください。

それで、execCommand（）のようにすべてのリッチテキストエディター機能を作成できる置換メソッドがバニラJavaScriptにあるのでしょうか。

グーグル検索で結果が出なかったので、同時に、メソッドが廃止されたと発表される可能性はあるが、代替案は提案されていないのではないかと思う。

javascriptrich-text-editorexeccommand
5
Linas M.

MDNへの変更document.execCommand()は廃止としてマークされ、関連する変更は https://github.com/mdn/browser-compat-data/commit/2d3890a で部分的に行われました https://w3c.github.io/editing/ActiveDocuments/execCommand.html が原因で、次のステートメントで大きな赤い警告が表示されます。

この仕様は不完全であり、ドラフトステータスを超えて進むことは期待されていません。著者は、これらの機能のほとんどを直接使用するのではなく、JavaScript編集ライブラリを使用する必要があります。このドキュメントで説明されている機能は、ユーザーエージェントによって一貫してまたは完全に実装されているわけではなく、これが予見可能な将来に変更されることは期待されていません。

バニラJavaScriptの代替方法に関する限り、同じ警告ボックスには次のように書かれています：

将来的には、両方の仕様がコンテンツ編集可能イベントと入力イベントに置き換えられると予測しました

…しかし残念なことに、私たちはまだそこにいません。そのため、残念ながら現在の状況では、まだ代替品はありませんが、document.execCommand()は現状ではクロスブラウザで相互運用できないことがわかります。また、ブラウザプロジェクトでは修正されません。それがMDN警告が言う理由です：

その使用はお勧めできません…使用しないようにしてください。

したがって、上記のコメントが言うように、それはドラッグアンドドロップの場合と同様です。いくつかの方法で壊れることが知られており、修正することは基本的に実用的ではないため、長い間そのようにされていました。

そして、それが仕様の赤い警告ボックスが開発者と作者に次のように言っている理由でもあります：

これらの機能のほとんどを直接使用するのではなく、JavaScript編集ライブラリを使用する必要があります

CKEditorやTinyMCEなどのオンラインリッチテキストエディターツールで利用可能なJavaScript編集ライブラリーは、document.execCommand()の根本的な問題をすべて解決します。バニラJavaScriptでdocument.execCommand()の独自の堅牢な処理を最初から記述しようとすると、基本的には、多くの作業と時間の後に、作成するために行われた作業を繰り返してしまうことになります。これらのツールの基礎となるJavaScriptライブラリ。

要するに、多くの時間と作業を節約するには、利用可能なライブラリの1つを使用します。

1
sideshowbarker