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

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

If the new node is to be added to a text Node, that Node is split at the insertion point, and the insertion occurs between the two text nodes.

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

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

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

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

错误演示:

如果我突出显示此问题的标题，则会出现以下警告框(我单击了 strikethrough 选项)。请注意，标题已从页面中消失。

Answer 1

由 document.createTextNode('') 创建的对象没有 innerHTML 属性。如果你想替换它的内容，你可以这样做:

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

如果你使用 HTML 内容，看起来它可能会破坏渲染，所以你要么必须获取父容器并直接编辑它的 innerHTML，要么将你的新节点包装在一些元素中种类，如果合适的话，如下:

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