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

Question

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

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

我不能有一个div,多个div是必须的.我怎样才能突出显示多个div的内容？使用范围？还要别的吗？

Answer 1

答案是它取决于浏览器.有关使用Ranges的两种方法的测试,请参阅此示例.第一次尝试创建每个可编辑的范围<div>并将所有这些添加到选择中.第二个尝试创建一个包含两个可编辑<div>的内容的Range .

结果:

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

Answer 2

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

\n\n

$(\'div\').bind("selectstart", function() {\n    $(\'div\').attr("contenteditable", false);\n});\xe2\x80\x8b\n

\n\n

这是一个要演示的小提琴（仅在 Chrome 中测试）。

\n\n

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

\n\n

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

\n