文字突出显示 - 内容编辑
我一直在尝试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上搜索,但部分原因是我为什么会发生这种情况的无知,我什么也找不到。
因此,我的问题是 - 为什么会出现这个错误,我该怎么做才能避免它,并达到我以编程方式突出显示和插入此文本的目标?
参考您的链接演示代码,你设置的范围内,此代码:
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之后获得您的范围。
setEnd不是问题,setStart是问题。 –
你为什么要给'range.setStart'和'range.setEnd'实数值补偿? – mattsven
只需手动突出显示由这些值所包围的部分即可。仅用于实验/学习的原因。 – MemoNick