JavaScript를 사용하여 contenteditable div의 커서 위치에 HTML을 어떻게 삽입합니까?

Contenteditable Div의 커서에 HTML 삽입

contenteditable div로 작업할 때 커서에 HTML을 삽입해야 하는 경우가 많습니다. 위치. 이는 JavaScript를 사용하여 키 누르기 이벤트를 캡처하고 Enter 키의 기본 동작을 방지할 수 있습니다.

HTML을 삽입하려면 Range 개체의 insertNode() 메서드를 사용할 수 있습니다. 이 방법을 사용하면 DOM의 지정된 위치에 노드를 삽입할 수 있습니다. IE <를 제외한 대부분의 브라우저에서 9에서는 이 방법을 직접 사용할 수 있습니다.

다음은 콘텐츠 선택 여부에 관계없이 모든 주요 브라우저의 커서 위치에 HTML을 삽입하는 방법을 보여주는 함수입니다.

function pasteHtmlAtCaret(html, selectPastedContent) {
    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 to hold the HTML
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }

            // Insert the HTML into the document
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                if (selectPastedContent) {
                    range.setStartBefore(firstNode);
                } else {
                    range.collapse(true);
                }
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        // IE < 9
        var originalRange = sel.createRange();
        originalRange.collapse(true);
        sel.createRange().pasteHTML(html);
        if (selectPastedContent) {
            range = sel.createRange();
            range.setEndPoint("StartToStart", originalRange);
            range.select();
        }
    }
}

In IE < 9에서는 Range 개체의 PasteHTML() 메서드를 사용하여 HTML을 삽입할 수 있습니다.

이 메서드를 사용하면 삽입된 콘텐츠를 선택할지 여부를 지정할 수 있으므로 더 유연합니다.

이 함수를 호출하려면 삽입하려는 HTML과 삽입된 콘텐츠를 선택할지 여부를 나타내는 부울 값을 전달하기만 하면 됩니다.

예:

pasteHtmlAtCaret('
New HTML
', true);
위 내용은 JavaScript를 사용하여 contenteditable div의 커서 위치에 HTML을 어떻게 삽입합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!