ContentEditable Div의 커서에 HTML을 삽입하는 방법은 무엇입니까?

ContentEditable Div의 커서에 HTML 삽입

편집이 가능한 div로 작업할 때 HTML을 직접 삽입할 수 있습니다. 커서. insertText()와 같은 메소드는 일반 텍스트를 추가할 수 있지만 브라우저는 일반적으로 이런 방식으로 삽입된 HTML을 실행하지 않고 텍스트로 표시합니다.

이러한 한계를 극복하려면 보다 정교한 접근 방식이 필요합니다. 한 가지 해결 방법은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!