怎样用javascript操作ftb编辑区内容

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 115 阅读

文章标签：

本文介绍了一种使用JavaScript操作Freetextbox编辑器的方法。通过对DOM元素的观察与分析，作者找到了针对不同编辑模式（如富文本、HTML源码及预览模式）下iframe元素的操作方式，最终实现了对编辑器内容的有效修改。

想法源于freetextbox的使用过程。
在我用ftb时，很想在客户端用js对ftb的编辑框进行操作，在使用ftb的页面中查看了dom树，发现ftb服务器端控件给客户端发过来的只有三个div，分别对应：编辑模式，html模式和预览模式（仅限于编辑区）代码如下：

<div id="content_designEditorArea" style="clear:both;padding-top:1px;">
2

</div>
4

<div id="content_htmlEditorArea" style="clear:both;display:none;padding-bottom:1px;">
5

<textarea id="content" name="content" disabled="disabled" style="padding: 0px; width:600px; height: 350px;" class="content_HtmlBox">3</textarea>
6

</div>
7

<div id="content_previewPaneArea" style="clear:both;display:none;padding-bottom:1px;">
8

</div>

看到代码，我很高兴，因为有比较熟悉的id为content的textarea，思路马上清晰了，直接用js往textarea的innerText属性加内容就可以了不是（你真是太有才了）。
马上行动，代码如下：

content.innerText=value;

结果很令我意外，我发现我能看到的ftb编辑区依然空空荡荡，又查dom树，发现content也就是html模式下的编辑区的确已经有了我需要的内容，可是回到普通编辑模式后，不但普通编辑模式没有内容，连html模式的编辑框里的内容也被删了；换个思路，我在普通编辑区手动打入内容，问题发现了，每当我在普通编辑区打入一个字，通过dom树我看到html编辑模式下的区域也跟着改变一下，而我在html模式下编辑时，普通模式的编辑区是不会跟着改变的，这就是为什么改了html模式下的内容，调整回普通编辑模式时内容消失的原因。
既然问题找到，看来要换换思路了---对普通编辑模式下的id为content_htmlEditorArea的iframe进行处理了，进行的很顺利，问题解决了，代码如下：

content_designEditor.document.body.innerHTML=value;

上面的代码告诉我们一个页面里的iframe，不论它的src有没有值，它都相当与一个新的document。