모든 브라우저에서 ContentEditable Div의 커서 위치에 HTML을 삽입하는 방법은 무엇입니까?

ContentEditable Div의 커서 위치에 HTML 삽입

문제 설명

해결책

IE 이외의 브라우저에 HTML을 직접 삽입하려면 Range 개체의 insertNode() 메서드를 활용하세요.

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();
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node;
            while (node = el.firstChild) {
                frag.appendChild(node);
            }
            range.insertNode(frag);
            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);
    }
}

붙여넣은 콘텐츠 선택 옵션이 포함된 업데이트된 솔루션

선택적으로 추가 매개변수를 사용하여 삽입된 콘텐츠를 선택할 수 있습니다.

function pasteHtmlAtCaret(html, selectPastedContent) {
    // ... Original code ...
    var firstNode = frag.firstChild;
    range.insertNode(frag);
    if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        if (selectPastedContent) {
            range.setStartBefore(firstNode);
        } else {
            range.collapse(true);
        }
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // ... Original code ...
}

이 코드는 원하는 경우 삽입된 콘텐츠를 선택할 수 있는 유연성을 추가하여 커서 위치에 HTML을 삽입하기 위한 브라우저 간 호환성을 제공합니다.

위 내용은 모든 브라우저에서 ContentEditable Div의 커서 위치에 HTML을 삽입하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!