从选择范围中删除节点后,ExecCommand 在 Chrome 60 中无法正常工作



我们在调试一个非常旧版本的 Redactor 编辑器时发现了一个非常棘手的情况。简而言之,从选择范围中删除span节点会导致 Chrome v60 中的execCommand行为不正确,尽管在 Firefox 和 Chrome v58 中它工作正常。

这是重现问题的小提琴:https://jsfiddle.net/47wqpv1f/4/。

选择一个单词,然后按按钮。您可能会在这里看到,在Firefox和Chrome 58中,文本将被删除,而在Chrome 60中,文本保持不变。

在格式操作(例如粗体(上,编辑器用两个不同的"标记"元素包围选择范围。

var range2 = range.cloneRange();
var marker = document.createElement('span');
marker.id="selection-marker-1";
marker.className="redactor-selection-marker";
marker.innerHTML = markerHTML;  
range2.collapse(true);
range2.insertNode(marker);

然后编辑器对选择进行一些操作,然后重置选择以匹配标记边界。

range.setStart(document.getElementById('selection-marker-1'), 0);
range.setEnd(document.getElementById('selection-marker-2'), 0);

之后,编辑器删除标记节点,根据想法,这些节点应保留原始选择。

marker.parentNode.removeChild(marker);
marker2.parentNode.removeChild(marker2);

接下来,编辑器再次为格式化过程的下一步添加标记,然后执行删除线execCommand

Chrome 60 只会在左侧标记中添加strike标签,而其他提到的浏览器将strike环绕整个选择(在这种情况下,这对我来说是预期的行为(。

我可以在这里想到不同的解决方法,但是在新Chrome中更改行为的实际原因是什么?

这可能只是Chrome中的一个错误,但请注意,根据规范(https://w3c.github.io/editing/execCommand.html(,execCommand处于草案中,预计将保留在那里。 它受支持,但可能并非在每个浏览器中都以完全相同的方式支持。 如果没有可靠的规范可循,实现可能会有所不同,甚至不同浏览器版本,尤其是从一个浏览器到另一个浏览器。

从长远来看,使用使用定义更好的标准的实现可能会取得更大的成功(当然,这是一个挑战!(,因为它们不是一个移动的目标!

最新更新