contenteditable div의 캐럿에 HTML 삽입

contenteditable div의 캐럿에 HTML 삽입

---

contenteditable이 설정된 div가 있고 enter 키를 눌렀을 때 preventDefault ()를 호출하기 위해 jquery를 사용하여 키 누르기를 캡처하고 있습니다. 커서에 텍스트를 삽입 하는 이 질문 과 유사 하게 html을 직접 삽입하고 싶습니다. 간결함을 위해 br 태그라고하겠습니다. 위의 질문에 대한 대답을 사용하면 실제로 range.pasteHTML 메서드를 사용하므로 IE에서 작동하지만 다른 브라우저에서는 br 태그가 html이 아닌 일반 텍스트로 나타납니다. 텍스트가 아닌 html을 삽입하도록 답변을 어떻게 수정할 수 있습니까?

---

대부분의 브라우저 insertNode()에서 선택 항목에서 얻은 범위 방법을 사용할 수 있습니다 . IE <9에서는 pasteHTML()언급했듯이을 사용할 수 있습니다 . 다음은 모든 주요 브라우저에서이를 수행하는 기능입니다. 컨텐츠가 이미 선택되어 있으면 대체되므로 이는 사실상 붙여 넣기 작업입니다. 또한 삽입 된 내용의 끝에 캐럿을 배치하는 코드를 추가했습니다.

jsFiddle : http://jsfiddle.net/jwvha/1/

암호:

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();

            // Range.createContextualFragment() would be useful here but is
            // only relatively recently standardized and is not supported in
            // some browsers (IE9, for one)
            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);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                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 월 21 일 업데이트

의견에서 요청한대로 삽입 된 콘텐츠를 선택할지 여부를 지정하는 추가 매개 변수가있는 업데이트 된 예제가 있습니다.

데모 : http://jsfiddle.net/timdown/jwvha/527/

암호:

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();

            // Range.createContextualFragment() would be useful here but is
            // only relatively recently standardized and is not supported in
            // some browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            var firstNode = frag.firstChild;
            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();
        }
    }
}

---

var doc = document.getElementById("your_iframe").contentWindow.document;

// IE <= 10
if (document.selection){
    var range = doc.selection.createRange();
        range.pasteHTML("<b>Some bold text</b>");

// IE 11 && Firefox, Opera .....
}else if(document.getSelection){
    var range = doc.getSelection().getRangeAt(0);
    var nnode = doc.createElement("b");
    range.surroundContents(nnode);
    nnode.innerHTML = "Some bold text";
};

---

빨리 읽고 주제에서 벗어나지 않기를 바라면서 여기에 나와 같이 div의 커서 수준에 코드를 삽입해야하는 사람들을위한 트랙이 있습니다.

document.getElementById('editeur').contentWindow.document.execCommand('insertHTML', false, '<br />');

'editeur'는 iframe입니다.

<iframe id="editeur" src="contenu_editeur_wysiwyg.php">
</iframe>

contenu_editeur_wysiwyg.php :

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
</div>
</body>
</html>

don't forget :

document.getElementById('editeur').contentDocument.designMode = "on";

---

var r = getSelection().getRangeAt(0);
r.insertNode(r.createContextualFragment('<b>Hello</b>'));

//select this range
getSelection().removeAllRanges();
getSelection().addRange(r);
//collapse to end/start 
getSelection().collapseToEnd() 

참고URL : https://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div