Question

我一直在尝试使用javascript中的contenteditable字段。正如你可能猜到的那样，我正在尝试构建一个WYSIWYG编辑器。拼凑在Stack Overflow上找到的答案，我设法构建了这个test case。测试用例的工作是手动和以编程方式突出显示文本并加以强化。只有一个小问题。如果你点击＆＃34;粗体＆＃34;按钮一次，子串突出显示，随后变为粗体。但是，如果再次单击它，则会提示错误：

"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)"

按下第一个按钮后，代表WYSIWYG编辑器内容的文本字段包含以下内容：

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

经过测试（通过输出第一个孩子的长度），我的假设是它试图只突出第一部分 - ＆＃34;有些文字他。＆＃34;我相信，进一步的测试，包括评论声明以鼓励选择，证实了这一点。事实上，当这被注释掉时，编辑器运作良好。

我在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之后获取您的范围。

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

1 个答案: