在Javascript contenteditable div中插入文本

我有一个问题，我需要插入一个文本（字符串，可能有或可能没有html标记）到一个div。它必须是一个div，而不是一个textarea

有什么办法吗？首先，我需要获得光标位置，然后在该位置插入文本

它类似于函数insertAdjacentText，但它只能在标记之前或之后插入，并且只能在IE中使用

---

请参阅此URL:。注意如何在div中定位光标，我们需要在光标位置添加文本。

范围和选择对象

使用和。其中包含有关当前选择的各种信息，以及当前选择在节点树中的位置

公平警告：

---

要做到您所描述的并非完全不可能，但如果您非常喜欢，您将陷入浏览器怪癖和不兼容的相当深渊。您必须进行大量的对象检测，检查以确保具有一致的值和方法。在开发过程中逐步检查所有浏览器。祝你好运

如果您只需要在当前选择/插入点插入HTML，这是可行的。在我的脑海中（为了让你开始）：

在IE中，使用document.selection.createRange（）

在其他浏览器中，您应该能够使用document.execCommand（“InsertHTML”，…）

我只在可编辑的iframe/documents中使用过这类技术，而不是div，但我相信如果div是集中的，这些调用应该可以工作

---

正如另一个答案所警告的那样，如果您想要更细粒度的控制，比如在其他地方插入文本，它会变得很难看。

您也可以使用insertImage使用一种循环方法。使用execCommand“insertImage”插入假图像（或小图像），然后使用Javascript替换innerHTML以添加文本

例如：

iFrame.focus()
iFrame.document.execCommand("insertImage", "", "fakeimage.jpg")
iFrame.document.body.innerHTML=iFrame.document.body.innerHTML.replace("<img src=\"fakeimage.jpg\">", "MY CUSTOM <b>HTML</b> HERE!")

iFrame.focus（）
iFrame.document.execCommand（“insertImage”、“fakeimage.jpg”）
iFrame.document.body.innerHTML=iFrame.document.body.innerHTML.replace（“，“我的自定义HTML在此！”）

而iFrame等于预期iFrame的id。或者，您可以通过使用document.getElementById（“IDofDIVlayer”）.innerHTML使用DIV层

在调用execCommand之前，一定要先聚焦，否则它可能无法在IE中工作

---

这种方法也适用于IE。已测试。

下面是一个跨浏览器示例，它改编自iFrame，可用于使用iFrame

function pasteHtmlAtCaret(html, selectPastedContent, iframe) {
    var sel, range;
    var win = iframe ? iframe.contentWindow : window;
    var doc = win.document;
    if (win.getSelection) {
        // IE9 and non-IE
        sel = win.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 = doc.createElement("div");
            el.innerHTML = html;
            var frag = doc.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 = doc.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();
        }
    }
}

函数粘贴HtmlatCaret（html，选择粘贴内容，iframe）{
var-sel，范围；
var win=iframe？iframe.contentWindow:window；
var doc=win.doc；
if（win.getSelection）{
//IE9和非IE
sel=win.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
范围=选择范围（0）；
range.deleteContents（）；
//Range.CreateContexturalFragment（）在这里会很有用，但是
//仅在相对较新的标准化阶段，在中不受支持
//一些浏览器（比如IE9）
var el=doc.createElement（“div”）；
el.innerHTML=html；
var frag=doc.createDocumentFragment（），节点，lastNode；
while（（node=el.firstChild））{
lastNode=frag.appendChild（节点）；
}
var firstNode=frag.firstChild；
range.insertNode（frag）；
//保留所选内容
如果（最后一个节点）{
range=range.cloneRange（）；
range.setStartAfter（lastNode）；
如果（选择粘贴内容）{
range.setStartBefore（第一个节点）；
}否则{
范围。塌陷（真）；
}
选择removeAllRanges（）；
选择添加范围（范围）；
}
}
}如果（（选择=文件选择）&&sel.type！=“控制”）{
//IE<9
var originalRange=sel.createRange（）；
原始范围。折叠（真）；
sel.createRange（）.pasteHTML（html）；
如果（选择粘贴内容）{
range=sel.createRange（）；
range.setEndPoint（“StartToStart”，原始范围）；
range.select（）；
}
}
}