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

Question

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

正在事件页面中添加标签，在添加格式标签后，将新值触发到消息 'paste' 键中的内容脚本 object。

我的内容脚本代码如下：

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 吗？是否缺少让文本显示的最后一步？

错误说明：

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

Answer 1

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

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

如果你使用 HTML 内容，看起来它可能会破坏渲染，所以要么你必须获取父容器并直接编辑其内部 HTML ，或者将您的新节点包装在某种元素中，如果合适的话，如下所示：

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

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

range.insertNode() is not inserting text node as expected

html

javascript

dom

innerhtml

google-chrome-extension

错误说明：