突出显示/选择多个带有内容可编辑范围的 div？

Question

假设我有一组 contenteditable="true" div。

<div id="0" contenteditable="true"></div>
<div id="1" contenteditable..></div>
<div...etc></div>

我不能有一个div，多个div是必须的。我如何突出显示多个div的内容？使用范围？还要别的吗？

Answer 1

答案是这取决于浏览器。请参阅此示例，了解使用范围的两种方法的测试。第一个尝试为每个可编辑

创建一个范围，并将它们全部添加到选择中。第二个尝试创建一个包含两个可编辑

内容的单个 Range。

结果：

• 在所有浏览器中，用户不可能创建存在于多个可编辑元素中的选择；
• Firefox 是主要浏览器中最宽松的。两种编程方法都有效。
• Safari 和 Chrome 是最不宽容的：这两种方法都不会从多个可编辑元素中选择内容。
• Opera 11 不支持选择多个范围，但支持跨越多个可编辑元素的选定范围。
• IE 9 之前的版本不支持 DOM Range 或与其他浏览器相同的 Selection API，但等效的 TextRange 代码不允许从多个可编辑元素中进行选择。

Answer 2

在其中一个 div 中开始选择后，可以将 div 即时切换为 contenteditable="false"。这样的东西给你的想法（使用JQuery）：

$('div').bind("selectstart", function() {
    $('div').attr("contenteditable", false);
});​

Here's a fiddle to demo（仅在Chrome中测试）。

请注意，在小提琴示例中，第一个 ContentEditable Div 获得焦点。这允许您像平常一样打字，但是一旦您使用鼠标或键盘选择任何内容，您就会看到可以像往常一样在 div 之间扩展选择。

这显然需要充实以与多个浏览器一起使用并适当地返回到 contenteditable="true" 。但我认为这个方法是有效的。

Answer 3

另一种解决方案是打开父元素的 contentaditable，而不是在每个子元素上将其关闭。

const editableDivs = document.getElementsByClassName("editable")
let selecting = false

for (const editableDiv of editableDivs) {
  editableDiv.addEventListener("mouseleave", (event) => {
    if (selecting)
      document.body.setAttribute("contenteditable", "true")
  })
}

document.body.addEventListener("mousedown", (event) => {
  selecting = true
})

document.body.addEventListener("mouseup", (event) => {
  document.body.setAttribute("contenteditable", "false")
  selecting = false
})

<div class="editable" contenteditable="true">
  This is the first editable div.
</div>

<div class="editable" contenteditable="true">
  This is the second editable div.
</div>