如何正确渲染MySQL数据库中带HTML标签的CKEditor内容

哥们，我太懂你这踩过的坑了！之前用CKEditor存富文本后展示，明明数据库里是带格式的HTML代码，结果页面上全是<p>``<strong>这些标签，完全没渲染成想要的样式。别慌，咱们分场景来解决：

1. 原生JavaScript直接操作DOM的情况 #

你大概率是用了innerText或者textContent来赋值，这俩方法会把所有内容当成纯文本解析，自然就把HTML标签原样显示了。换成innerHTML就行，它会告诉浏览器把内容当成真正的HTML来渲染：

// 假设从后端接口拿到的CKEditor内容
const ckeditorContent = "<h3>这是标题</h3><p>这是一段<strong>加粗</strong>的正文，还有<br/>换行效果</p>";
// 找到页面上要展示内容的容器
const displayBox = document.getElementById("content-display");
// 用innerHTML赋值，替代innerText
displayBox.innerHTML = ckeditorContent;

2. 框架开发场景（Vue/React） #

Vue环境

别用{{ ckeditorContent }}这种文本插值，Vue会自动转义HTML内容。要改用v-html指令，它会直接渲染HTML：

<!-- 正确写法 -->
<div v-html="ckeditorContent"></div>

React环境

React默认也会转义HTML，要使用dangerouslySetInnerHTML属性（名字听起来吓人，但只要是你自己CKEditor生成的可信内容，完全没问题）：

// 正确写法
<div dangerouslySetInnerHTML={{ __html: ckeditorContent }}></div>

3. PHP输出到页面的注意事项 #

从MySQL取出内容后，PHP别做多余的HTML转义！比如如果存数据时没特意转义，直接echo就行：

<?php
// 假设从数据库查询到的内容存在$content变量里
echo $content;
?>

如果之前存数据时用了htmlspecialchars()转义，那取出来要先解码再输出：

echo htmlspecialchars_decode($content);

重要提醒：XSS安全防护 #

直接渲染HTML有XSS注入风险，一定要确保存入数据库的内容是安全的！CKEditor本身会过滤大部分恶意标签，但建议后端再加一层防护，比如用HTMLPurifier工具过滤掉危险的脚本标签，避免被恶意攻击。

内容的提问来源于stack exchange，提问作者kaddie