html range 后插入,javascript – range.insertNode()未按预期插入文本节点

我正在创建一个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吗？是否有一些我遗漏的最后一步才能显示文字？

证明错误：

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

解决方法:

document.createTextNode(”)创建的对象没有innerHTML属性.如果要替换其内容,可以执行以下操作：

var newNode = document.createTextNode('');

newNode.replaceWholeText(message.paste);

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

var newNode = document.createElement('b');

newNode.innerHTML = message.paste;

标签：javascript,dom,html5,innerhtml,google-chrome-extension

来源： https://codeday.me/bug/20190624/1275913.html