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

Question

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

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

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

Answer 1

答案是取决于浏览器。请参阅this example 以测试使用 Ranges 的两种方法。第一次尝试为每个可编辑的<div> 创建一个范围，并将它们全部添加到选择中。第二次尝试创建一个包含两个可编辑<div>s 内容的范围。

结果：

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

Answer 2

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

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

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

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

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