range.setStartBefore 和 range.setEndAfter 在内容可编辑的 Edge 和 IE11 中不起作用答案

【问题标题】：range.setStartBefore and range.setEndAfter don't work in Edge and IE11 in contenteditablerange.setStartBefore 和 range.setEndAfter 在内容可编辑的 Edge 和 IE11 中不起作用
【发布时间】：2018-05-31 21:02:25
【问题描述】：

虽然没有错误，而且 Edge 和 IE11 都支持 range.setStartBefore 和 range.setEndAfter，但没有任何反应。我检查了每个属性，一切看起来都正常，但没有突出显示/选择整个范围。

这适用于 Chrome、Firefox 和 Opera。

要进行交互，请选择 lorem ipsum 文本中间的几个字符或单词。 Chrome、Firefox 和 Opera 将像他们应该的那样选择其余的 lorem ipsum 文本。 Edge 和 IE11 什么都不做。

演示：https://codepen.io/anon/pen/OEVzoe

document.querySelector('div').addEventListener('mouseup', function() {
  var range = window.getSelection().getRangeAt(0);
  range.setStartBefore(range.startContainer.parentNode);
  range.setEndAfter(range.endContainer.parentNode);
});

<div contenteditable="true">
  <p>Hi</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum aspernatur veniam ut accusamus, ratione nemo veritatis itaque, quia esse in recusandae qui pariatur tenetur non optio odio quis fugiat minima.</p>
  <p>Bye</p>
</div>

【问题讨论】：

标签： javascript contenteditable rich-text-editor

【解决方案1】：

虽然 Edge 和 IE11 没有直观地显示它，但该范围仍在选择中。您可以通过在函数回调的最后一行添加range.deleteContents(); 来看到这一点。

然而，这意味着任何编辑行为（例如富文本编辑）来更改样式将仅使用视觉选择/突出显示的内容，即使实际范围不同！：/

【讨论】：