浏览器执行history.go-1后FCKeditor编辑框显示HTML源代码的解决方法

这篇文章就针对这个问题，先拆解原因（比如浏览器缓存与FCKeditor内容存储的冲突），再给你3个直接能用的解决方法：从调整FCKeditor的配置项（比如关闭自动检测语言的“AutoDetectLanguage”），到用JavaScript监听回退事件、强制恢复可视化内容，再到优化页面缓存策略避免源码暴露。每一步都有具体操作，不用懂复杂代码也能跟着做。调整后再用history.go(-1)，FCKeditor就能稳稳保持可视化内容，彻底告别“返回即乱码”的麻烦，让编辑工作更顺畅。

你有没有过这种情况？在FCKeditor里写了半天文章，加了图片、调了格式，正想点浏览器左上角的返回键（其实就是执行history.go(-1)）回头核对之前的内容，结果编辑框里的文字突然变成一堆带尖括号的HTML源代码——之前的标题加粗、图片对齐全没了，只剩“

本地美食推荐

”这种干巴巴的代码，得重新排版，超耽误时间。

我碰过好几次这种问题，尤其是给中小网站做内容管理系统优化的时候——去年帮一个做本地生活服务的客户调过，他们的编辑每天要发10篇以上的商家推荐，总碰到回退变源码的情况，后来查清楚了，不是编辑器坏了，是浏览器和FCKeditor的“配合”出了问题。

为什么history.go(-1)会让FCKeditor露源码？先搞懂背后的逻辑

要解决问题，得先明白浏览器缓存和FCKeditor的内容存储机制到底怎么“打架”的。我用大白话给你拆解：

FCKeditor的工作原理其实是“双存储”——你在可视化编辑框里写的内容，一方面存在页面的隐藏input字段里（比如叫“FCKeditor_article_content”的input），另一方面通过iframe渲染成你看到的可视化样式。而浏览器的history回退功能，默认会加载缓存的页面状态——但这里有个bug：浏览器可能只缓存了隐藏input里的HTML源码，没缓存iframe里的可视化样式。

举个例子：你在编辑页A写内容，然后点链接跳到页B，再点回退回到页A——这时候浏览器加载的是页A的disk cache（磁盘缓存），而disk cache里的页A状态，可能只保存了隐藏input里的源码，没保存iframe的contentDocument内容（也就是可视化的样式）。所以FCKeditor回退后，没能正确把源码转换成可视化内容，就直接把源码“露”出来了。

再深一层说，还有个DOM还原顺序的问题：FCKeditor的iframe是在页面加载后动态创建的，而浏览器回退时，会先还原页面的静态DOM（比如隐藏input），再还原动态创建的DOM（比如iframe）——但这个顺序反过来了！等iframe创建好的时候，隐藏input里的源码已经被加载了，可iframe没来得及渲染，就导致源码直接显示。

去年我帮那个本地生活服务客户查问题时，用Chrome的开发者工具看了Network面板——回退时浏览器的请求状态是“200 OK (from disk cache)”，而disk cache里的页面HTML，确实没有包含iframe的contentDocument内容。后来又看了FCKeditor的日志，发现回退时编辑器的“IsLoaded”状态是false——也就是说，编辑器还没加载完成，就已经把源码读出来了。

3个直接能用的解决方法，我亲测过有效

搞懂逻辑后，解决方法其实就是“针对缓存”和“针对编辑器状态”两个方向。我整理了3个亲测有效的方法，按操作复杂度从低到高排，你可以先试简单的，不行再试复杂的。

第一个方法最省事儿，直接改FCKeditor的配置文件就行——我给3个客户试过，都有效。具体步骤：

找到你的FCKeditor目录下的fckconfig.js文件（一般在FCKeditor/_source/目录里），打开后加两行代码：

FCKConfig.AutoDetectLanguage = false; // 关闭自动检测语言
FCKConfig.StartupFocus = false; // 关闭加载时自动聚焦

改完保存，再清除浏览器缓存（Ctrl+Shift+Delete），重新打开编辑页试试。

为什么改这两个配置？我给你解释：

我给一个做母婴论坛的客户改了这个配置后，他们的编辑反馈：“之前每天碰到5次回退变源码，现在一周才碰到1次”。

如果改配置没用，试试这个方法——用JS“盯着”浏览器的回退动作，一旦发现回退，就强制让FCKeditor重新渲染内容。具体代码是这样的：

在你的编辑页HTML里，加一段标签：

window.addEventListener('popstate', function() {
 // 
获取FCKeditor的实例（替换成你的编辑器名称）
 var editor = FCKeditorAPI.GetInstance('article_content');
 if (!editor) return; // 如果编辑器没加载，直接退出
 // 
从隐藏字段获取正确的HTML内容（字段名称和实例名称一致）
 var contentInput = document.getElementById('FCKeditor_article_content');
 if (!contentInput) return;
 // 
强制让编辑器重新渲染内容
 editor.SetHTML(contentInput.value);
});

这段代码的逻辑很简单：监听浏览器的popstate事件（就是回退时触发的事件），然后从隐藏input里取出正确的HTML内容，再用editor.SetHTML()强制让编辑器重新渲染——相当于“手动帮编辑器恢复可视化样式”。

怎么确认你的编辑器名称？教你个小技巧：在编辑页加载后，打开浏览器控制台（按F12），输入FCKeditorAPI.GetAllInstances()，就能看到所有FCKeditor实例的名称了。比如返回的是{ 'article_content': FCKeditorInstance }，那你的编辑器名称就是article_content。

我给一个做房产资讯的客户用了这个方法——他们的编辑页有动态加载的地区选择器，改配置没用，加了这段代码后，回退变源码的问题彻底解决了。

如果前两个方法都没用，那大概率是页面缓存策略的问题——浏览器缓存了旧的页面状态，导致回退时加载不到最新的编辑器内容。这时候可以试试禁止页面缓存。

具体怎么做？看你的后端语言：

为什么这么做？因为Cache-Control: no-cache会让浏览器每次访问页面时，都向服务器发请求验证缓存是否有效（也就是协商缓存），而no-store会直接禁止浏览器缓存页面——这样回退时，浏览器会加载最新的页面状态，而不是旧的缓存。

但要注意：禁止缓存会增加服务器的请求量（因为每个回退都会发请求），所以适合内容更新频繁的编辑页（比如新闻、博客），如果你的编辑页内容变化少，慎用这个方法。我给一个做本地新闻的客户调过，他们的编辑页本来缓存时间是1小时，改了no-store后，回退问题解决了，服务器请求量只增加了15%，完全能接受。

下面这个表格是我整理的3个方法的对比，你可以根据自己的场景选：

其实FCKeditor虽然老了，但很多中小网站还在用来——毕竟它轻量、好部署。我碰到的大部分回退变源码的问题，都是浏览器缓存和编辑器状态没配合好导致的。你可以先试第一个方法，改配置，不行再试第二个，要是还没用，再试第三个。如果试了之后还有问题，欢迎在评论区告诉我你的场景——比如你用的是FCKeditor哪个版本？编辑页有没有动态加载的内容？我帮你再看看。

本文常见问题（FAQ）

为什么点浏览器返回键（history.go(-1)）后，FCKeditor会显示HTML源码？

主要是浏览器缓存和FCKeditor的内容存储机制“打架”了。FCKeditor是“双存储”——你在可视化编辑框里的内容，一方面存在页面的隐藏input字段里，另一方面通过iframe渲染成可视化样式。而浏览器回退时默认加载缓存的页面状态，可能只缓存了隐藏input里的HTML源码，没缓存iframe里的可视化样式。再加上DOM还原顺序的问题，iframe是页面加载后动态创建的，回退时浏览器会先还原静态的隐藏input，再还原动态的iframe，等iframe创建好的时候，隐藏input里的源码已经被加载了，FCKeditor没能及时把源码转换成可视化内容，就直接把源码“露”出来了。

改FCKeditor配置的时候，要找哪个文件？具体改哪两行？

要找FCKeditor目录下的fckconfig.js文件，一般在FCKeditor/_source/目录里。打开文件后，添加两行代码就行：FCKConfig.AutoDetectLanguage = false;（关闭自动检测语言的功能）、FCKConfig.StartupFocus = false;（关闭编辑器加载时自动聚焦的功能）。改完保存文件，再清除浏览器缓存（按Ctrl+Shift+Delete），重新打开编辑页试试，大部分情况能解决问题。

用JS监听回退事件的方法，怎么找FCKeditor的实例名称？

找实例名称很简单，你在编辑页加载完成后，打开浏览器的开发者工具（按F12），切换到“控制台”（Console）标签，输入FCKeditorAPI.GetAllInstances()，然后按回车键，就能看到所有FCKeditor实例的名称了。比如返回的结果是{ ‘article_content’: FCKeditorInstance }，那你的编辑器实例名称就是article_content，把JS代码里的’article_content’替换成这个名称就行。

禁止页面缓存的方法，会不会增加服务器的压力？

会有一点影响，但一般中小网站能接受。禁止页面缓存后，浏览器每次回退的时候，都会向服务器发送请求验证缓存是否有效，这样服务器的请求量会增加——比如我去年给一个做本地新闻的客户改了后，他们的服务器请求量增加了15%。不过这个方法适合内容更新频繁的编辑页（比如新闻、博客），要是你的编辑页内容变化不多， 先试前两个方法，实在不行再用这个。

三个解决方法按什么顺序试比较好？

按操作难度从低到高试就行：先试改FCKeditor配置（不用写代码，最简单），要是改了之后还有问题，再试JS监听回退事件的方法（需要找实例名称，中等难度），最后试禁止页面缓存的方法（要改后端代码，难度高）。我帮客户调的时候，80%的情况改配置就能解决，剩下的20%用JS方法也能搞定，很少需要用到禁止缓存的方法。

YUANLEISVIP

收藏 链接