在按钮事件后突出显示特定范围的 tinymce 文本

【问题标题】：highlighting certain range of tinymce text after a button event在按钮事件后突出显示特定范围的 tinymce 文本
【发布时间】：2014-09-23 09:51:41
【问题描述】：

参考了一些来源，我把它放到了一个按钮事件中，给定，

<textarea id="content" name="content" style="width:400px;height:100px;">
<p><span style="font-weight:bold;font-size:36pt;">Some text <u>here</u> to go.</span></p>
</textarea>

var range = document.createRange();
var start = document.getElementById('tinymce');
var textNode = start.getElementsByTagName('p')[0].firstChild;
range.setStart(textNode, 1);
range.setEnd(textNode, 1);
window.getSelection().addRange(range);

但它会在 chrome 控制台中产生错误：未捕获的类型错误：无法读取 null 的属性“getElementsByTagName”

假设我首先有由 tinymce 生成的 tinymce 元素。有哪位专家可以帮助我吗？

【问题讨论】：

标签： tinymce

【解决方案1】：

该错误是由于tinymce id 不在当前顶级文档中，而是在 iFrame 的文档中。所以你必须先访问 iFrame 并获取文档元素。

var frame= document.getElementById('content_ifr');
var doc = frame.contentWindow.document;
var range = doc.createRange();
var start = doc.getElementById('tinymce');

找到一个工作小提琴HERE

【讨论】：

我尝试选择第 10 到第 15 个字符，但似乎没有用，因为只选择了第一个子节点。 jsfiddle.net/3krLhgcL/12 知道如何解决这个问题吗？怀疑发生此问题是因为该文本中有一个，因此使其看起来像 3 种不同的节点。
那是因为getElementsByTagName('span')[0].firstChild返回文本节点“Some text”，总共有10个字符。所以 15 的结束偏移会抛出一个错误，因为 15 超出了范围。要完成您正在尝试的事情，您必须按照jsfiddle.net/kelvo/3krLhgcL/16 的行做一些事情