ContentEditable Div のカーソル位置に HTML を挿入するにはどうすればよいですか?

ContentEditable Div のカーソル位置に HTML を挿入

編集可能な Div を操作する場合、HTML を直接挿入したい場合があります。カーソル。 insertText() のようなメソッドはプレーン テキストを追加できますが、ブラウザは通常、この方法で挿入された HTML を実行するのではなく、テキストとして表示します。

この制限を克服するには、より複雑なアプローチが必要です。解決策の 1 つは、Range オブジェクトの insertNode() メソッドを利用することです。ただし、IE8 以前は、pasteHTML() に依存します。

実装

次の関数は、主要なブラウザ間での HTML 挿入を処理します:

function pasteHtmlAtCaret(html) {
  // Obtain the selection range
  var sel, range;
  if (window.getSelection) {
    // For non-IE browsers
    sel = window.getSelection();
    range = sel.getRangeAt(0);
  } else if (document.selection) {
    // For IE8 and below
    range = document.selection.createRange();
  }

  // Delete existing content in the range
  range.deleteContents();

  // Create an element to hold the HTML
  var el = document.createElement("div");
  el.innerHTML = html;
  
  // Create a fragment to insert
  var frag = document.createDocumentFragment();

  // Loop through elements in the div
  while ((node = el.firstChild)) {
    frag.appendChild(node);
  }
  
  // Insert the fragment into the range
  range.insertNode(frag);

  // Position the caret after the inserted content
  range = range.cloneRange();
  range.setStartAfter(frag.lastChild);
  range.collapse(true);
  if (sel) sel.removeAllRanges();
  if (sel) sel.addRange(range);
}

改善

ユーザーの要望に基づいて、追加のパラメーターを備えた更新バージョンが開発されました:

function pasteHtmlAtCaret(html, selectPastedContent) {
  // ... (same as before)

  // Modify based on parameter
  if (selectPastedContent) {
    range.setStartBefore(frag.firstChild);
  } else {
    range.collapse(true);
  }

  // Update the selection
  sel.removeAllRanges();
  sel.addRange(range);
}

このパラメーターを true に設定すると、実行時に挿入されたコンテンツを選択できるようになります。

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