CKEditor内容解析问题：MongoDB存储后前端显示标签而非解析样式

嘿，这个问题我太熟了！很多用CKEditor存内容的开发者都会碰到——明明数据库里存的是带HTML标签的格式化内容，前端取出来却直接把标签显示成文本，完全没了排版效果对吧？其实核心原因就是前端没把拿到的HTML字符串解析成实际的DOM元素，而是当成纯文本输出了。下面分几种常见的前端场景给你具体解决方案：

1. 原生JavaScript场景 #

如果是纯原生JS写的页面，别用textContent或者直接给元素赋值纯文本，改用innerHTML属性把HTML字符串插入到容器里：

// 假设从接口/数据库拿到的CKEditor内容是contentHtml
const contentHtml = "<p>这是CKEditor编辑的<strong>加粗文本</strong></p>";
// 获取要展示内容的容器元素
const contentContainer = document.getElementById('content-container');
// 关键：用innerHTML插入，而不是textContent
contentContainer.innerHTML = contentHtml;

2. Vue.js 场景（Vue2/Vue3通用） #

Vue默认会把{{ }}插值的内容当作纯文本，要渲染HTML的话，直接用v-html指令就行：

<template>
  <!-- 用v-html代替普通插值，自动解析HTML标签 -->
  <div v-html="ckeditorContent"></div>
</template>

<script>
export default {
  data() {
    return {
      ckeditorContent: "" // 这里赋值从后端拿到的HTML字符串
    };
  },
  mounted() {
    // 模拟从接口获取数据库里的内容
    this.ckeditorContent = "<h2>我的标题</h2><p>这是一段带有<em>斜体</em>的文本</p>";
  }
};
</script>

小贴士：Vue3用<script setup>语法的话，只需要把ckeditorContent定义为响应式变量，v-html的用法完全一样~

3. React 场景 #

React里要渲染HTML字符串，得用dangerouslySetInnerHTML属性（名字听起来吓人，但只要你能确保内容是可信的，就放心用）：

import React, { useState, useEffect } from 'react';

function CkeditorDisplay() {
  const [content, setContent] = useState("");

  useEffect(() => {
    // 模拟从后端拉取MongoDB里的内容
    setContent("<ul><li>列表项1</li><li>列表项2</li></ul>");
  }, []);

  return (
    // 注意格式：值是一个包含__html键的对象
    <div dangerouslySetInnerHTML={{ __html: content }}></div>
  );
}

export default CkeditorDisplay;

• XSS攻击风险：如果你的CKEditor允许普通用户输入内容（尤其是匿名用户），直接渲染HTML可能会被注入恶意脚本！建议在后端存储前用DOMPurify这类工具过滤掉危险标签和脚本；前端渲染前也可以再做一次校验，确保内容安全。
• MongoDB存储检查：确认你存入数据库的是原始的HTML字符串，没有被转义（比如把<转成<）。如果存的时候被转义了，取出来自然会显示标签文本，这时候要检查后端接口是不是做了多余的转义处理。

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