range.insertNode() 未按预期插入文本节点

Question

我正在创建一个 chrome 扩展。基本上，如果用户单击内容菜单选项，我想在所选文本之前和之后插入 HTML 格式标签。

这些标签被添加到事件页面中，在添加格式标签后，该事件页面会在消息对象的“粘贴”键中向内容脚本触发新值。

我的内容脚本的代码如下：

chrome.runtime.onMessage.addListener(handleRequest)

function handleRequest(message, sender)
{
    if (message.paste!==undefined) 
    {
        var newNode = document.createTextNode('');
        newNode.innerHTML=message.paste;   

        var cursor = window.getSelection().getRangeAt(0);       
        cursor.deleteContents();     
        cursor.insertNode(newNode);    
        alert(newNode.innerHTML);       
    }
}

我认为我这样做是正确的，因为根据这个

如果要将新节点添加到文本节点，则该节点将在插入点处拆分，并且插入发生在两个文本节点之间。

但是，单击上下文菜单选项的结果只是删除所选的任何文本。新文本永远不会添加，但不会将错误打印到控制台。

我知道这不适用于输入元素或文本区域中的内容，现在我只是试图让它在页面上的常规文本上工作。

正如预期的那样，警报弹出窗口的内容是格式化标签包围的选定文本。

有人可以解释我做错了什么吗？我不应该编辑文本节点的 HTML 吗？我是否缺少最后一步来使文本显示？

错误示范：

如果我突出显示该问题的标题，则会出现以下警告框（我单击了删除线选项）。请注意，标题已从页面上消失。

Answer 1

document.createTextNode('') 创建的对象没有innerHTML 属性。如果您想替换其内容，可以按如下操作：

var newNode = document.createTextNode('');
newNode.replaceWholeText(message.paste);

如果您使用 HTML 内容进行渲染，那么看起来它可能会破坏渲染，因此您必须获取父容器并直接编辑其innerHTML，或者将新节点包装在某种元素中，如果适当，如下：

var newNode = document.createElement('b');
newNode.innerHTML = message.paste;