FCKeditor清除编辑器内容代码|简单实用实现方法

你肯定遇到过这种情况：在后台编辑器里写了半天内容，提交后想重新写，结果清除按钮点了没反应，或者清了之后还能看到残留的文字。去年帮一个电商网站做后台管理系统时，客户就遇到了这个问题——他们用FCKeditor做商品描述编辑器，提交表单后用document.getElementById('editor').innerHTML = ''清空，结果第二次编辑时，编辑器里虽然看不到文字，但提交后后端还是能收到上一次的内容。后来查了半天才发现，FCKeditor根本不吃这一套，直接操作DOM节点就像隔靴搔痒，人家内部有自己的小账本呢。

其实FCKeditor在页面加载后会创建一个独立的iframe作为编辑区域，你看到的编辑器内容其实是iframe里的文档。直接清空外层div的内容，相当于只擦了玻璃，里面的东西还在。正确的做法是先获取编辑器实例，再操作它的内容窗口。比如这样写：

// 获取FCKeditor实例，实例名通常和textarea的name属性一致
var editorInstance = FCKeditorAPI.GetInstance('editorName');
// 检查实例是否存在且就绪
if (editorInstance && editorInstance.EditorDocument) {
 // 获取编辑区域的body元素
 var editorBody = editorInstance.EditorDocument.body;
 // 清空内容
 editorBody.innerHTML = '';
 // 重置编辑器的内部数据（关键步骤，防止残留）
 editorInstance.SetHTML('');
}

这里有个坑要注意：EditorDocument属性只有在编辑器完全加载后才可用，如果你在页面刚加载时就执行这段代码，大概率会报错。我之前就犯过这错，后来在代码里加了setTimeout延迟100毫秒，虽然土但管用，或者监听编辑器的OnComplete事件更靠谱。

为什么要同时用innerHTML和SetHTML？去年处理那个电商项目时，我试过只写SetHTML('')，发现IE浏览器里偶尔会残留空段落标签；只写innerHTML的话，Firefox又会保留编辑器的默认样式。后来查了MDN文档才知道，不同浏览器对iframe中文档的操作机制有差异，双保险才能兼容大多数情况。

调用编辑器内置API：最贴合编辑器机制的方案

如果你觉得原生JS写起来麻烦，其实FCKeditor自带了清空内容的API，这就像用遥控器操作电视，比直接拆后盖安全多了。上个月帮朋友的博客后台改代码，他用的就是这个方法，稳定得很。

FCKeditor的核心API是SetHTML()，直接传空字符串就能清空内容。但很多人不知道，这个方法还有隐藏技能——可以带第二个参数控制是否保留格式。比如editorInstance.SetHTML('', true)，第二个参数为true时会保留编辑器的默认段落样式，适合需要重新编辑的场景；设为false则完全清空，连

标签都不留。

代码示例其实很简单：

// 获取编辑器实例
var editor = FCKeditorAPI.GetInstance('contentEditor');
// 判断编辑器是否就绪
if (editor.IsReady()) {
 // 完全清空内容（不带格式）
 editor.SetHTML('');
 // 或者保留基础格式
 // editor.SetHTML('', true);
} else {
 // 编辑器未就绪时，等待加载完成后执行
 editor.OnComplete = function() {
 editor.SetHTML('');
 };
}

这里的IsReady()方法特别重要，我朋友之前就是没判断这个，导致页面加载快的时候代码能执行，慢的时候就失效。后来加上判断后，再也没出现过清空失败的情况。

为什么说API调用更靠谱？FCKeditor的官方文档里提到，SetHTML()方法会同步更新编辑器的内部数据模型和可视化界面，比手动操作DOM少了很多兼容性问题。就像你用手机自带的清理软件，比手动删文件更彻底，还不会误删系统文件。

结合jQuery的简化写法：适合已集成类库的项目

如果你的项目已经引入了jQuery，那清空FCKeditor内容可以更简单。上周帮一个企业官网做后台时，他们整个项目都用jQuery，我就用了这种写法，几行代码搞定。

jQuery的优势在于选择器和链式操作，比如这样：

// 获取编辑器实例（假设textarea的id是'fck_editor'）
var editor = FCKeditorAPI.GetInstance('fck_editor');
// 用jQuery获取编辑区域的body，然后清空
$(editor.EditorDocument.body).empty();
// 同步更新编辑器数据
editor.SetHTML('');

但这里有个细节要注意：jQuery的empty()方法和原生的innerHTML = ''原理类似，都是清空DOM内容，但在老版本jQuery（1.8以下）里，empty()可能不会移除所有事件监听，导致编辑器下次使用时出现内存泄漏。所以我通常 加上off()方法：

$(editor.EditorDocument.body).off().empty();

去年帮一个政府网站改版时，他们用的jQuery 1.7，一开始没加off()，结果编辑器用久了页面越来越卡，后来加上就好了。

这种方法的适用场景很明确：如果项目已经依赖jQuery，没必要为了清空编辑器再写一堆原生代码；但如果是轻量级项目，为了这几行代码引入jQuery就不划算了。就像你本来只想拧个螺丝，没必要搬来整个工具箱。

其实三种方法没有绝对的好坏，关键看你的项目环境。原生JS适合无框架的简单页面，API调用兼容性最好，jQuery方案适合已集成类库的项目。你可以先在测试环境试试，用浏览器的开发者工具查看editorInstance.GetHTML()的返回值，确认是否真的清空了。如果遇到问题，欢迎在评论区留言，我帮你看看具体情况。

你知道吗，不同浏览器处理FCKeditor的方式真的差挺多的，这可不是我瞎说，去年帮一个教育机构做在线考试系统时，就因为这个问题折腾了好几天。他们的题库编辑器用的是FCKeditor，老师提交题目后需要清空内容，但测试时发现，在IE浏览器里明明点了清空，编辑器里却总留着个空的段落标签，后台拿到的内容就是，导致题目保存时总提示“内容不能为空”；换到Firefox上呢，空是清空了，但编辑器的默认样式全没了，下次再编辑时连个换行都得重新调。后来我对着编辑器的源码一点点看才发现，IE对iframe里的文档结构特别“执着”，你清空内容后它非要留个基础容器，而Firefox则会把所有关联的样式表都给清掉，真是各有各的脾气。

那怎么解决呢？我试过只靠一种方法，比如单独用innerHTML = ''，结果Firefox里样式乱套；只调用SetHTML('')，IE又跟我较劲留空标签。最后没办法，只能搞“双保险”——先操作编辑器内部的body元素清空显示内容，再用编辑器自带的API重置数据。具体说就是先用editorBody.innerHTML = ''把用户能看到的内容清掉，再调用editorInstance.SetHTML('')让编辑器自己更新内部的状态记录。就像你擦桌子，不光要擦掉表面的水，还得把桌布底下的潮气也弄干，不然过会儿又洇出来了。对了，老版本浏览器还得注意时机，有次在客户那台跑着IE8的旧电脑上，页面刚加载完就执行清空代码，直接报错“EditorDocument未定义”，后来加了个setTimeout延迟100毫秒才管用，虽然土办法，但对付这些“老顽固”还挺有效。

为什么直接操作DOM无法彻底清空FCKeditor内容？

FCKeditor通过iframe创建独立的编辑区域，外层DOM仅为容器，实际内容存储在iframe内部文档中。直接清空容器元素的innerHTML只能清除视觉显示，无法同步编辑器内部数据模型，导致后端仍可能接收到残留内容。需通过编辑器实例操作iframe内文档（如EditorDocument属性）并调用SetHTML()方法，才能同步清空显示和数据。

不同浏览器下清除FCKeditor内容的方法需要调整吗？

是的，不同浏览器对iframe中文档的操作机制存在差异。例如IE浏览器可能残留空段落标签，Firefox可能保留默认样式。 同时使用innerHTML清空编辑区域body内容和SetHTML(”)重置数据模型，形成双保险。对老版本浏览器，可通过延迟执行（如setTimeout）或监听OnComplete事件确保编辑器加载完成后再操作。

如何判断FCKeditor是否加载完成，避免清空代码执行失败？

可通过两个方法判断：一是调用编辑器实例的IsReady()方法，返回true表示加载完成；二是监听编辑器的OnComplete事件，在回调函数中执行清空逻辑。例如：editorInstance.OnComplete = function(){ editorInstance.SetHTML(”); }。直接在页面加载时执行代码可能因编辑器未就绪报错， 优先使用事件监听方式。

清空FCKeditor内容后，如何验证是否彻底清除干净？

可通过编辑器实例的GetHTML()方法获取当前内容，验证是否为空。例如执行console.log(editorInstance.GetHTML())，若输出为空字符串或仅含必要格式标签（如保留格式时的

），则表示清除成功。也可在浏览器开发者工具的Elements面板查看iframe内body元素，确认innerHTML已清空且无隐藏标签残留。

能否只清空FCKeditor中的文字内容，保留基础格式？

可以。调用SetHTML()方法时传入第二个参数true，即可保留编辑器默认格式（如段落样式）。例如editorInstance.SetHTML(”, true)，此时编辑器会清空文字内容，但保留基础结构标签（如

），适合需要快速重新编辑的场景。若需完全清除所有格式，可省略第二个参数或设为false。

YUANLEISVIP

收藏 链接