文字突出显示 - 内容编辑

我一直在尝试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)"

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

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

在测试时（通过输出第一个孩子的长度），我的假设是，它只试图强调第一部分 - “他的一些文字”。我相信，进一步的测试，包括评论声明以鼓励选择，证实了这一点。事实上，当这个评论出来时，编辑运作良好。

我在谷歌和Stack Exchange上搜索，但部分原因是我为什么会发生这种情况的无知，我什么也找不到。

因此，我的问题是 - 为什么会出现这个错误，我该怎么做才能避免它，并达到我以编程方式突出显示和插入此文本的目标？

来源

2014-05-08 MemoNick

你为什么要给'range.setStart'和'range.setEnd'实数值补偿？ – mattsven

只需手动突出显示由这些值所包围的部分即可。仅用于实验/学习的原因。 – MemoNick

-1

参考您的链接演示代码，你设置的范围内，此代码：

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

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

Some text here for you to bold

第一次运行该文本节点被分成三块之后：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之后获得您的范围。

来源

2014-06-16 03:11:12 teleclimber

setEnd不是问题，setStart是问题。 –

文字突出显示 - 内容编辑

回答

相关问题