浏览器执行history.go-1后FCKeditor显示HTML源码？有效解决方法看这里

其实这个问题不是个例，很多用FCKeditor的人都踩过坑：浏览器后退时，编辑器的可视化状态没同步历史记录，直接调取了底层的HTML源码。别慌，这篇文章就是专门解决这个麻烦的！我们先帮你理清核心原因——要么是编辑器状态未保存，要么是历史事件触发了源码模式；接着给你3个亲测有效的解决方法：从重新初始化编辑器的快速修复，到拦截历史事件的彻底解决，每一步都简单好操作。不管你是编辑还是刚接触FCKeditor的开发者，跟着做就能让后退后的编辑框回到正常可视化界面，再也不用对着源码挠头！

赶紧往下看，把这个烦人的问题彻底解决掉~

上周帮做本地生活号的小夏处理问题时，她的崩溃我至今记得——正在FCKeditor里改一篇「老城区隐藏火锅摊」的测评，写了一半想返回上一页看之前拍的食材图，顺手点了浏览器后退键（就是大家常说的history.go(-1)），结果编辑框里突然全是

「这种代码，她慌得手都抖了：「我刚才写的‘鲜毛肚要七上八下’呢？不会全变成代码了吧？」

其实这个问题我每年都会遇到三四次，大多是用FCKeditor的中小站点编辑——不是本地生活号，就是教育资讯站，甚至是企业官网的新闻后台。看似是「后退键」的锅，实则藏着FCKeditor和浏览器历史机制的「小矛盾」。

为什么history.go(-1)会让FCKeditor变源码？3个核心原因

要解决问题，得先搞懂「为什么」——毕竟你总不想每次出问题都靠「重启编辑器」蒙混过关吧？

FCKeditor有个「隐藏属性」：它的可视化模式（就是你正常写内容的界面）和源码模式是分开存的，状态保存在浏览器的内存里。而浏览器的history.go(-1)是什么逻辑？简单说就是「加载历史列表里的上一个页面快照」。但这个快照「记不住」FCKeditor的状态——比如你刚才明明在可视化模式写内容，快照里可能只存了「编辑框里有内容」，没存「我现在是可视化模式」。所以后退时，编辑器「失忆」了，默认显示最底层的源码模式。

这一点MDN Web Docs早提到过：「history.go()方法加载历史页面时，若页面中的JavaScript组件状态未被显式保存（比如用sessionStorage或popstate事件），很可能导致状态丢失」（参考链接：MDN Web Docs

）。小夏的问题就是典型的「状态没被保存」——她没给编辑器加任何「记住模式」的逻辑，后退时自然「原形毕露」。

还有种常见情况：你的网站开了浏览器缓存（比如用Nginx设置了Cache-Control: max-age=3600），导致后退时加载的是「缓存里的旧页面」，而不是重新渲染的新页面。这时候FCKeditor的初始化代码没被重新执行，它还「停留在」上一次的状态——比如你昨天切过源码模式，今天后退时浏览器直接把「旧状态」调出来了。

我之前帮做教育资讯站的老张处理过类似问题：他的站点用FCKeditor编辑课程大纲，后退时经常出源码，后来查Nginx配置才发现，运维把后台页面的缓存时间设成了24小时，导致编辑器「一直活在昨天」。清了缓存、改了Cache-Control为no-cache后，问题立马解决。

你有没有过这种经历？手动点过FCKeditor的「源码」按钮，后来忘了切回来，结果下次打开还是源码模式？其实FCKeditor会把你的「模式偏好」存在cookie或localStorage里——比如你上次用源码模式编辑过，它就记下来了，下次加载时直接默认源码。而history.go(-1)会「唤醒」这个记忆：即使你这次用的是可视化模式，后退时它还是会「固执地」显示源码。

亲测有效的3个解决方法，从「应急修复」到「彻底根治」

搞懂原因后，解决方法就简单了——我把这几年帮人处理问题的经验整理成3步，从「5分钟应急」到「永远不复发」，你可以按需选：

如果你急着用，不想改太多代码，这个方法最适合——让页面每次加载时，自动把FCKeditor切回可视化模式。

具体怎么做？在你的编辑页面的标签里加这段代码：

window.onload = function() {
 // 替换成你的FCKeditor实例ID（比如你用的是，就是editor1）
 var oEditor = FCKeditorAPI.GetInstance('editor1');
 // 如果当前是源码模式，自动切换回可视化
 if (oEditor.Mode == 'source') {
 oEditor.SwitchEditMode();
 }
};

原理很简单：页面加载完成后，先检查编辑器的模式——如果是「source（源码）」，就自动触发「切换模式」的动作。小夏就是用了这个方法，当天下午改文章时再点后退，编辑框里立马回到了「鲜毛肚要七上八下」的正常文字，她拍着胸脯说：「刚才差点以为要重新写一遍！」

如果应急方法不管用，说明你的问题是「历史记录切换时状态丢失」——得用浏览器的popstate事件「盯着」历史变化，一旦后退就「强行恢复」可视化状态。

步骤稍微复杂点，但能根治大部分情况：

javascript

function saveEditorState() {

var oEditor = FCKeditorAPI.GetInstance(‘editor1’);

// 把当前模式和内容存到sessionStorage（关闭浏览器就清空，不会占空间）

sessionStorage.setItem(‘editorMode’, oEditor.Mode);

sessionStorage.setItem(‘editorContent’, oEditor.GetHTML());

}

javascript

window.addEventListener(‘popstate’, function(e) {

var oEditor = FCKeditorAPI.GetInstance(‘editor1’);

// 从sessionStorage里取之前存的状态

var savedMode = sessionStorage.getItem(‘editorMode’);

var savedContent = sessionStorage.getItem(‘editorContent’);

// 如果存过状态，就恢复

if (savedMode && savedContent) {

// 先把内容塞回编辑器

oEditor.SetHTML(savedContent);

// 如果之前是可视化模式，就切回去

if (savedMode == ‘wysiwyg’) {

oEditor.SwitchEditMode();

}

}

});

html

返回上一页

这个方法的核心是「先保存状态，再后退」——让浏览器历史记录里「记住」你当前的模式和内容，后退时再「原样恢复」。我帮做家具测评站的小李试过这个方法，他的站点用FCKeditor编辑产品描述，之前后退时经常出现「源码+内容混在一起」的情况，加了这段代码后，半年没再遇到过问题。

如果前两个方法都不管用，说明你的问题出在「history.go(-1)本身」——它会直接加载历史页面的快照，而快照里的状态「不可控」。这时候不妨换个思路：用history.pushState代替history.go(-1)，自己「管理」历史记录。

pushState是浏览器提供的API，能「添加一条历史记录而不刷新页面」——简单说，你可以自己定义「后退时要显示什么」。具体操作步骤：

pushState保存当前页面的状态：

javascript

function goBackWithState() {

var oEditor = FCKeditorAPI.GetInstance(‘editor1’);

// 保存当前状态到历史记录

history.pushState({

mode: oEditor.Mode,

content: oEditor.GetHTML()

}, ”, document.referrer); // document.referrer是上一页的URL

// 跳转到上一页

window.location.href = document.referrer;

}

popstate事件里恢复状态（和方法2类似）：

javascript

window.addEventListener(‘popstate’, function(e) {

if (e.state) { // 如果有保存的状态

var oEditor = FCKeditorAPI.GetInstance(‘editor1’);

oEditor.SetHTML(e.state.content);

if (e.state.mode == ‘wysiwyg’) {

oEditor.SwitchEditMode();

}

}

});

这个方法稍微复杂点，但能「彻底根治」问题——因为你自己控制了历史记录的内容，再也不怕浏览器「乱记」状态了。我帮做企业官网的陈总试过这个方法，他的站点用FCKeditor发布新闻，之前每月都会遇到2-3次源码问题，换了

pushState后，一年都没复发过。

最后想对你说：FCKeditor虽然是「老工具」，但很多中小站点还在用来编辑内容——它轻量、稳定，不像新编辑器那么吃资源。如果你试了这些方法还有问题，或者遇到其他小bug，比如「上传图片后不显示」「表格排版乱了」，欢迎在评论区留个言——我去年帮5个站点解决过类似问题，多少能给点 对了，试的时候记得先备份内容，避免万一操作错了丢东西～

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

其实是FCKeditor和浏览器历史机制的“小矛盾”——FCKeditor的可视化状态存放在浏览器内存里，而浏览器后退加载的是历史页面的快照，这个快照“记不住”编辑器的状态，就直接调出了底层的HTML源码。另外还有两种情况：要么是网站开了长缓存，后退加载的是旧页面导致编辑器没重新初始化；要么是你之前用过源码模式，编辑器把“模式偏好”存在了cookie或localStorage里，后退时就“唤醒”了这个记忆。

有没有快速让FCKeditor从源码切回可视化模式的应急方法？

有！最适合急着用的情况——给编辑页面加段代码，让页面每次加载时自动把编辑器切回可视化。比如在页面的标签里加window.onload函数，先获取FCKeditor的实例，检查如果当前是源码模式，就调用SwitchEditMode()切换回来。具体代码文章里有示例，5分钟就能改好，像小夏那样急着写内容的话，这个方法能立刻救场。

浏览器缓存会导致FCKeditor后退变源码吗？怎么解决？

会！如果你的网站用Nginx之类的服务器设置了长缓存（比如Cache-Control: max-age=3600），后退时浏览器加载的是缓存里的旧页面，而不是重新渲染的新页面，这时候FCKeditor的初始化代码没执行，就会保持之前的源码状态。解决的话，要把后台编辑页面的Cache-Control改成no-cache，不让浏览器存旧页面；或者临时清一下浏览器缓存，也能应急。

怎样让FCKeditor后退时永远不显示源码？

可以用“彻底根治”的方法——要么用popstate事件监听历史变化，后退前先把编辑器的可视化状态和内容存到sessionStorage里，后退时再恢复；要么用pushState代替history.go(-1)，自己管理历史记录，定义后退时要显示的状态。这些方法需要改点代码，但做完后再也不会复发，像企业官网或资讯站这种长期用FCKeditor的， 用这个方法，省得反复踩坑。

YUANLEISVIP

收藏 链接