> 웹 프론트엔드 > JS 튜토리얼 > 캐럿 위치에서 Contenteditable DIV에 HTML을 삽입하는 방법은 무엇입니까?

캐럿 위치에서 Contenteditable DIV에 HTML을 삽입하는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-11-10 00:19:02
원래의
348명이 탐색했습니다.

How to Insert HTML into a Contenteditable DIV at the Caret Position?

Contenteditable DIV의 Caret 위치에 HTML 삽입

도전 과제:

Contenteditable div에서 키 누르기 이벤트 캡처 Enter 키를 눌렀을 때 텍스트 입력을 방지하는 데 사용할 수 있습니다. 원하는 삽입 지점에 커서를 놓고 HTML(예:
태그)을 일반 텍스트로 표시하지 않고 삽입하는 방법을 찾습니다.

해결책:

Range.pasteHTML()을 사용하면 IE에서 작동하지만 다른 브라우저에서는 HTML 태그를 텍스트로 표시합니다. 다음 기능을 사용하면 모든 주요 브라우저에 HTML을 삽입하고 선택한 경우 기존 텍스트를 바꿀 수 있습니다.

function pasteHtmlAtCaret(html) {
  var sel, range;
  if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();

      // Create a document fragment from the HTML string
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment();
      while ((node = el.firstChild)) {
        frag.appendChild(node);
      }

      range.insertNode(frag);

      // Preserve the selection after the inserted content
      if (frag.lastChild) {
        range = range.cloneRange();
        range.setStartAfter(frag.lastChild);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if (document.selection && document.selection.type != "Control") {
    // IE < 9
    document.selection.createRange().pasteHTML(html);
  }
}
로그인 후 복사

향상된 기능(2013년 8월):

에 대한 응답 사용자 요청에 따라 삽입된 콘텐츠를 선택해야 하는지 여부를 지정하는 추가 매개변수가 추가되었습니다.

function pasteHtmlAtCaret(html, selectPastedContent) {
  // Similar functionality as the original function
  // ...
}
로그인 후 복사

이 업데이트된 기능을 사용하면 HTML 콘텐츠 삽입 후 선택 동작을 제어할 수 있습니다.

위 내용은 캐럿 위치에서 Contenteditable DIV에 HTML을 삽입하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿