Firefox 93下带contenteditable属性的span多行选中替换失效咨询

这是Firefox 93版本的原生浏览器Bug，与你的使用方式无关。该版本对contenteditable元素的选区计算逻辑做了未覆盖全场景的调整，跨换行的多行文本选区在执行替换操作时，内部Range边界识别会出现异常，导致替换操作无法命中选中内容。该问题在Firefox 92及更早版本、其他主流浏览器中均不存在，且官方已在Firefox 94版本中修复了该问题。

如果你需要兼容Firefox 93版本的用户，可以通过以下两种方式修复问题：

• 调整Range选区的定位逻辑，直接定位到文本节点的字符偏移，而非父元素的子节点偏移，同时在添加选区前先清空已有选区避免冲突，修改后的JS代码如下：

var spanContent = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`;
window.addEventListener('load', function () {
    var span = document.getElementById('myEditable');
    span.innerText = spanContent;
    // 直接获取文本节点设置偏移，而非针对父元素的子节点索引设置
    var textNode = span.firstChild;
    var range = new Range();
    range.setStart(textNode, 2);
    range.setEnd(textNode, 5);
    // 先清空已有选区再添加，避免Firefox多选区异常
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(range);
});

• 给可编辑span添加显式的换行处理样式，避免浏览器自动合并换行符导致的选区计算异常：

#myEditable {
  white-space: pre-wrap;
  display: inline-block;
}

如果你不需要兼容旧版本Firefox，直接引导用户升级到Firefox 94及以上版本即可解决该问题。

内容的提问来源于stack exchange，提问作者Scriptkiddy1337