我们在调试一个非常旧版本的 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处于草案中,预计将保留在那里。 它受支持,但可能并非在每个浏览器中都以完全相同的方式支持。 如果没有可靠的规范可循,实现可能会有所不同,甚至不同浏览器版本,尤其是从一个浏览器到另一个浏览器。
从长远来看,使用使用定义更好的标准的实现可能会取得更大的成功(当然,这是一个挑战!(,因为它们不是一个移动的目标!