在可编辑的Javascript div中插入文本

Question

有没有办法将文本（字符串，可能带有html标签）插入到

中？

必须是

而不是。</p> <p>首先，我需要获取光标位置，然后在该位置插入文本。 它类似于函数<code>insertAdjacentText</code>，但它只能在标记之前或之后插入，并且仅适用于IE。</p> <p>请参考此网址：<a href="http://yart.com.au/test/iframe.aspx" rel="nofollow noreferrer">http://yart.com.au/test/iframe.aspx</a>。 注意如何在<div>中定位光标，我们需要在光标位置添加文本。</p>

- Restless Wanderer

Answer 1

如果您只需要在当前选择/插入点插入HTML，则可以实现。以下是我能想到的一些方法（供您参考）：

• 在IE中，使用document.selection.createRange().pasteHTML(theNewHTML)。
• 在其他浏览器中，您应该能够使用document.execCommand("InsertHTML", ...)。

我仅在可编辑的iframe / document中使用过这些技术，而不是divs，但我相信如果div被聚焦，这些调用应该有效。

正如另一个回答所警告的那样，如果您想要更精细的控制，例如在其他位置插入文本，情况会变得很棘手。

- DavidLG

Answer 2

范围和选择对象

使用选择对象和范围对象。它们包含有关当前选择及其在节点树中所处位置的各种信息。

警告: 虽然不完全不可能实现你描述的功能，但如果过于复杂，你将面临浏览器怪癖和不兼容性的问题。你需要进行大量对象检测，确保你拥有一致的值和方法。在开发过程中逐步检查所有浏览器。祝好运！

- keparo

Answer 3

这是一个跨浏览器的示例，从this answer改编而来，可以用于处理iframes。

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

- Tim Down

Answer 4

你也可以使用插入图片的方法来绕过这个问题。你可以使用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等于所需iFrame的ID。或者，您可以使用DIV层，方法是使用document.getElementById("IDofDIVlayer").innerHTML

在调用execCommand之前确保聚焦，否则在IE中可能无法正常工作。

此方法也适用于IE。已测试。

- SyntaxLAMP