Question

我们在调试一个非常旧版本的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中改变行为的实际原因是什么？

Answer 1

这可能只是Chrome中的一个错误，但请注意，根据规范（https://w3c.github.io/editing/execCommand.html），execCommand处于草案状态，并且预计会留在那里。它受支持，但在每个浏览器中可能不会以完全相同的方式支持。如果没有可靠的规范，实施可能会有所不同，即使是跨浏览器版本，特别是从一个浏览器到另一个浏览器。

从长远来看，使用更好定义的标准（确实是挑战！）的实现可能会取得更大成功，因为它们不再是移动目标！

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

1 个答案: