如何使用 JavaScript 在 contenteditable div 中的光标位置插入 HTML？

在 Contenteditable Div 的光标处插入 HTML

使用 contenteditable div 时，通常需要在光标处插入 HTML位置。这可以使用 JavaScript 捕获按键事件并阻止 Enter 键的默认行为来完成。

要插入 HTML，我们可以使用 Range 对象的 insertNode() 方法。该方法允许我们将节点插入到 DOM 的指定位置。在大多数浏览器中，除了 IE

这里有一个函数，演示了如何在所有主流浏览器中，无论是否选中内容，在光标位置插入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();

            // Create a document fragment to hold the HTML
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }

            // Insert the HTML into the document
            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();
        }
    }
}

中IE < 9、我们可以使用Range对象的pasteHTML()方法来插入HTML。

这个方法比较灵活，它允许我们指定是否要选择插入的内容。

调用此函数，只需传入要插入的 HTML 和一个布尔值来指示是否选择插入的内容即可。

例如：

pasteHtmlAtCaret('<p>New HTML</p>', true);

以上是如何使用 JavaScript 在 contenteditable div 中的光标位置插入 HTML？的详细内容。更多信息请关注PHP中文网其他相关文章！