div中能追加html代码,在contenteditable div中的插入符中插入html

小编典典

在大多数浏览器中，您可以使用insertNode() 从选择中获得的范围方法。pasteHTML()如前所述，在IE

<9中，您可以使用。以下是在所有主要浏览器中执行此操作的功能。如果已经选择了内容，则将其替换，因此这实际上是粘贴操作。另外，我添加了代码以将插入符号放置在插入内容的末尾之后。

码：

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

}

}

根据注释的要求，这是一个带有附加参数的更新示例，该附加参数指定是否选择插入的内容。

码：

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

}

}

}

2020-04-25