content editable div에 htmlat carter 삽입

content editable div에 htmlat carter 삽입

저는 contented editable set이 있는 div를 가지고 있고 엔터키를 누르면 preventDefault()를 호출하기 위해 jquery를 사용하여 키를 캡쳐하고 있습니다.커서에 텍스트를 삽입하는 이 질문과 유사하게 html을 직접 삽입하고자 합니다. 간단히 설명하자면 abr 태그라고 하겠습니다.위 질문에 대한 답을 사용하면 range.paste를 사용하기 때문에 IE에서 실제로 작동합니다.HTML 방식이지만 다른 브라우저에서는 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";
};

빨리 읽고 주제에서 벗어나지 않기를 바라면서, 저처럼 디브의 커서 레벨에 코드를 삽입해야 하는 사람들을 위한 트랙이 있습니다.

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

'edituer'는 iframe:

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

contenu_editeur_wysywyg.php:

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

잊지 마세요:

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