文本突出显示 - 内容可编辑

Question

我一直在尝试使用 javascript 中的 contenteditable 字段。正如您可能猜到的，我正在尝试构建一个所见即所得的编辑器。拼凑我在 Stack Overflow 上找到的答案，我设法构建了这个 test case。测试用例的工作是手动和以编程方式突出显示文本并使其更加大胆。只有一个小问题。如果单击“粗体”按钮一次，子字符串将突出显示并随后变为粗体。但是，如果再次点击，则会提示错误：

"Error: Failed to execute 'setStart' on 'Range': There is no child at offset 12.
at Error (native)
at HTMLInputElement.<anonymous> (http://run.jsbin.io/runner:15:13)
at HTMLDocument.oa (http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:18:373)
at HTMLDocument.c.event.handle (http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:55:307)
at HTMLDocument.j.handle.o (http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:49:363)"

第一次按下按钮后，代表所见即所得编辑器内容的文本字段包含以下内容：

Some text he<span style="font-weight: bold;">re for y</span>ou to bold

在测试时（通过输出第一个孩子的长度），我的假设是它试图仅突出显示第一部分 - “一些文字他”。我相信，进一步的测试，包括注释掉声明以鼓励选择，证实了这一点。事实上，当它被注释掉时，编辑器工作得很好。

我在 Google 和 Stack Exchange 上进行了搜索，但部分由于我不知道为什么会发生这种情况，我什么也没找到。

因此，我的问题是 - 为什么会出现此错误，我可以做些什么来避免它并实现以编程方式突出显示和加粗此文本的目标？

Answer 1

参考您链接的演示代码，您正在使用此代码设置范围：

range.setStart(mainDiv.firstChild, 12);
range.setEnd(mainDiv.firstChild, 20);

但是mainDiv.firstChild是主div的第一个文本节点。在初始运行时，文本节点是

Some text here for you to bold

在第一次运行之后，文本节点被分成三部分：1 块在粗体之前，1 块在粗体内部，1 块之后。

Some text he<span style="font-weight: bold;">re for y</span>ou to bold

所以你的mainDiv.firstChild变成了

Some text he

因此，对range.setEnd(mainDiv.firstChild, 20) 的调用超出范围。

为避免这种情况，请不要对 setRange 的调用进行硬编码。而是直接从用户选择（一种非常常见的情况）或在调用之前检查实际 DOM 之后获取您的范围。