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

【问题标题】：ExecCommand works incorrectly in Chrome 60 after removing node from selection range从选择范围中删除节点后，ExecCommand 在 Chrome 60 中无法正常工作
【发布时间】：2018-01-26 01:42:16
【问题描述】：

在调试非常旧版本的 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 中改变行为的真正原因是什么？

【问题讨论】：

俗称a bug。很多软件都有它，为了解决这些问题，一些公司使用跟踪工具，让他们的用户承认它，并最终试图摆脱这些。你发现这个标本的软件的开发团队有this tool，都对你开放。

标签： javascript html google-chrome contenteditable

【解决方案1】：

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

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

【讨论】：