admin 生活技巧 AI对话 2026-04-28 13:14:56

为什么保存了之后，后台内容编辑器看不到内容网站前台可以看到悬浮朗读机器人全局生效放footer最底部 / 刷新自动显示

直接把带<style>、<script>的 HTML 代码粘到了富文本编辑器里，编辑器会把它当成 HTML 代码处理，才出现了「前端能看到效果，后台编辑器看不到内容」的情况，和之前的朗读机器人问题是两回事。

为什么会出现这个现象？

你的后台用的是富文本编辑器（带排版、加粗、图片上传的那种），这种编辑器对 HTML 代码有特殊的安全处理规则：

危险标签过滤：为了防止恶意代码注入，编辑器在「编辑模式」下，会自动隐藏 / 过滤<script>、<style>这类标签，避免它们影响编辑器本身的运行。
- 所以：代码其实已经存到数据库里了，前端访问时会完整输出 HTML，所以能看到按钮 / 效果；但后台编辑时，编辑器把这些标签藏起来了，你就看不到内容，看起来像空的。
可视化模式不支持显示源码：你直接粘 HTML 代码，编辑器会默认把它当成要渲染的效果，而不是普通文本。比如粘了<button>，编辑器只会显示按钮，不会显示代码本身；而<script>又被隐藏了，所以编辑框里就看不到东西了。
特殊格式解析异常：代码里的、{}、=这些符号，也可能让编辑器解析出错，导致内容加载不出来。

其他文章里没有这些特殊标签，都是普通文字和图片，编辑器能正常渲染，所以只有这篇出问题。

✅ 解决方法：把代码当成「纯文本」保存，前后台都能正常看到

你的核心需求是「备份代码，以后方便复制」，只要让编辑器把代码当成普通文本，而不是 HTML 代码，就不会出问题了，给你 3 个最简单的方法：

方法 1：用编辑器的「代码块 / 预格式化」功能（最稳，推荐）

绝大多数 CMS 编辑器都有这个功能，图标一般是{}或<>，步骤：

先清空这篇有问题的文章内容，保存恢复正常。
新建一篇文章，标题叫「朗读机器人代码备份」，方便以后找。
进入编辑器，找到工具栏里的「代码块」/「插入预格式化文本」按钮（有的叫 “源码”、“代码”）。
点击按钮，在弹出的文本框里完整粘贴你的朗读机器人代码，点确定。
保存文章，再进后台编辑：前后台都能看到完整的代码文本，不会被过滤，也不会被渲染成按钮，以后直接复制就行！

方法 2：手动把 HTML 代码转成纯文本（无代码块功能时用）

如果你的编辑器没有代码块功能，就手动把代码里的<和>替换成普通文本符号，让编辑器不把它当成 HTML 标签：

把所有<替换成<
把所有>替换成>

比如原来的<style>会变成<style>，这样编辑器只会把它当成普通文本，前后台都能正常显示。以后复制的时候，再把<和>改回<和>即可。

方法 3：直接存成 txt 文件（最省事，不用管编辑器）

如果只是想备份代码，根本不用存在网站文章里！直接在电脑上新建一个朗读机器人代码备份.txt文件，把代码粘进去存起来，以后用的时候直接打开复制就行，比存到后台方便 100 倍，还不会出任何问题。

补充：如果这篇文章已经保存了，怎么救回代码？

如果这篇文章已经发布，后台编辑器看不到内容，别慌：

先不要删除这篇文章，数据库里的代码还在。
用宝塔 / 数据库管理工具，找到这篇文章对应的数据库记录，把content字段里的内容复制出来，就能拿到完整的代码了。
拿到代码后，按上面的方法重新存成纯文本或 txt 文件即可。

悬浮朗读机器人全局生效放footer最底部 / 刷新自动显示



==============111111111111111111====================================================

【
<style>
#duBox{position:fixed;bottom:25px;right:25px;z-index:999999;}
#duBtn{width:55px;height:55px;border-radius:50%;background:#0066cc;color:#fff;border:none;font-size:22px;cursor:pointer;box-shadow:0 2px 10px #999;}
#duPanel{position:absolute;bottom:65px;right:0;background:#fff;border:1px solid #eee;padding:15px;border-radius:8px;display:none;width:160px;}
.duItem{display:block;width:100%;margin:5px 0;padding:7px;border:none;border-radius:4px;cursor:pointer;}
.duRead{background:#0066cc;color:#fff;}
.duStop{background:#666;color:#fff;}
.duHide{background:#ccc;color:#333;}
</style>

<div id="duBox">
<button id="duBtn"></button>
<div id="duPanel">
<button class="duItem duRead" id="startDu">朗读文章</button>
<button class="duItem duStop" id="stopDu">停止朗读</button>
<button class="duItem duHide" id="hideDu">临时隐藏</button>
</div>
</div>

<script>
var synth = window.speechSynthesis;
document.getElementById('duBtn').onclick=function(){
let p = document.getElementById('duPanel');
p.style.display = p.style.display=='block'?'none':'block';
}
// 朗读
document.getElementById('startDu').onclick=function(){
synth.cancel();
// 只读文章内容，不乱读菜单标题
let txt = document.querySelector('.content,.article-content,#content')?.innerText || document.body.innerText;
txt = txt.trim();
if(!txt){alert("无内容可朗读");return;}
let r = new SpeechSynthesisUtterance(txt);
r.lang="zh-CN";
r.rate=1.3;
synth.speak(r);
document.getElementById('duPanel').style.display='none';
}
// 停止
document.getElementById('stopDu').onclick=function(){
synth.cancel();
}
// 临时隐藏刷新复原
document.getElementById('hideDu').onclick=function(){
document.getElementById('duBox').style.display='none';
}
// 点击别处关闭面板
document.addEventListener("click",function(e){
if(!document.getElementById('duBox').contains(e.target)){
document.getElementById('duPanel').style.display='none';
}
})
</script>

】

============222222222222222222======================================================

【
<style>
#duBox{position:fixed;bottom:25px;right:25px;z-index:999999;}
#duBtn{width:55px;height:55px;border-radius:50%;background:#0066cc;color:#fff;border:none;font-size:22px;cursor:pointer;box-shadow:0 2px 10px #999;}
#duPanel{position:absolute;bottom:65px;right:0;background:#fff;border:1px solid #eee;padding:15px;border-radius:8px;display:none;width:160px;}
.duItem{display:block;width:100%;margin:5px 0;padding:7px;border:none;border-radius:4px;cursor:pointer;}
.duRead{background:#0066cc;color:#fff;}
.duStop{background:#666;color:#fff;}
.duHide{background:#ccc;color:#333;}
</style>
<div id="duBox">
<button id="duBtn"></button>
<div id="duPanel">
<button class="duItem duRead" id="startDu">朗读文章</button>
<button class="duItem duStop" id="stopDu">停止朗读</button>
<button class="duItem duHide" id="hideDu">临时隐藏</button>
</div>
</div>
<script>
var synth = window.speechSynthesis;
document.getElementById('duBtn').onclick=function(){
let p = document.getElementById('duPanel');
p.style.display = p.style.display=='block'?'none':'block';
}
// 朗读
document.getElementById('startDu').onclick=function(){
synth.cancel();
// 只读文章内容，不乱读菜单标题
let txt = document.querySelector('.content,.article-content,#content')?.innerText || document.body.innerText;
txt = txt.trim();
if(!txt){alert("无内容可朗读");return;}
let r = new SpeechSynthesisUtterance(txt);
r.lang="zh-CN";
r.rate=1;
synth.speak(r);
document.getElementById('duPanel').style.display='none';
}
// 停止
document.getElementById('stopDu').onclick=function(){
synth.cancel();
}
// 临时隐藏刷新复原
document.getElementById('hideDu').onclick=function(){
document.getElementById('duBox').style.display='none';
}
// 点击别处关闭面板
document.addEventListener("click",function(e){
if(!document.getElementById('duBox').contains(e.target)){
document.getElementById('duPanel').style.display='none';
}
})
</script>

】
-->-->

admin

分享到：