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

Contenteditable Div의 캐럿에 Html 삽입

contenteditable div에서 키 누르기를 캡처하면 원치 않는 문자 삽입을 방지할 수 있습니다. 이로 인해
태그와 같은 HTML 요소를 직접 삽입해야 한다는 요구 사항이 제기됩니다. contenteditable div에 텍스트 삽입을 위해 제공된 솔루션은 range.pasteHTML 메서드를 사용하여 IE에서 작동하지만 다른 브라우저에서는
태그를 일반 텍스트로 렌더링합니다.

insertNode()를 사용하여 HTML 삽입

대부분의 브라우저에서는 선택 항목에서 얻은 Range의 insertNode() 메서드를 활용하여 HTML 노드를 삽입할 수 있습니다. 9 이하의 IE 버전은 여전히 ​​붙여넣기HTML()을 지원합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!