ContentEditable Div のキャレットに HTML を挿入するにはどうすればよいですか?

Contenteditable Div のキャレットに Html を挿入

contenteditable div でキー入力をキャプチャすると、不要な文字の挿入を防ぐことができます。これにより、
タグなどの HTML 要素を直接挿入する必要が生じます。 contenteditable div にテキストを挿入するために提供されるソリューションは、IE では range.pasteHTML メソッドを使用して機能しますが、他のブラウザでは
タグをプレーン テキストとしてレンダリングします。

insertNode() を使用した HTML の挿入

ほとんどのブラウザでは、選択範囲から取得した Range の insertNode() メソッドを利用して HTML ノードを挿入できます。 9 より前の IE バージョンでは、引き続き pastHTML() がサポートされています。

HTML を挿入する関数

次の関数を使用して、すべての主要なブラウザのキャレットに HTML を挿入できます。

function pasteHtmlAtCaret(html) {
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment(), node, lastNode;
      while ((node = el.firstChild)) {
        lastNode = frag.appendChild(node);
      }
      range.insertNode(frag);
      if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if (document.selection && document.selection.type != "Control") {
    document.selection.createRange().pasteHTML(html);
  }
}

更新: 挿入されたコンテンツの選択

挿入後に挿入されたコンテンツを選択するシナリオの場合、以下に示すように追加パラメーターを使用して関数を更新できます。 :

function pasteHtmlAtCaret(html, selectPastedContent) {
  // Implementation with logic for selecting the inserted content if selectPastedContent is true
}

以上がContentEditable Div のキャレットに HTML を挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。