React集成TinyMCE时如何正确输出HTML避免前端显示标签丢失样式

两个异常现象的成因完全独立：

• 配置format: 'text'时，TinyMCE会主动剥离所有HTML格式标签，仅输出纯文本内容，粗体、斜体、段落这类富文本结构会被全部清除，自然不可能保留样式，这个配置本身就是为纯文本输入场景设计的，不适合富文本博客编辑场景。
• 切换format: 'html'后标签明文显示，是React默认的XSS防护机制导致的：React渲染普通字符串变量时，会自动转义字符串中的<、>这类HTML特殊字符，不会将字符串解析为真实DOM节点，因此会直接展示<p>、<strong>这类标签原文。如果看到标签被<code>包裹，检查渲染逻辑即可，一般是误将文章内容套入了<code>/<pre>标签，或是调试时的临时输出逻辑没清理。

1. 修正编辑器输出配置 #

使用官方@tinymce/tinymce-react组件时，直接删除format: 'text'配置项，组件默认就会输出带完整富文本标签的HTML字符串，无需额外调整format参数，基础配置参考：

import { Editor } from '@tinymce/tinymce-react';

export default function BlogEditor() {
  const handleContentChange = (content) => {
    // 此处拿到的content是标准HTML字符串，直接存入后端即可
    // 例：<p>这是<strong>粗体</strong>、<em>斜体</em>内容</p>
    saveBlogContentToApi(content)
  }

  return (
    <Editor
      apiKey="你的TinyMCE公钥"
      init={{
        plugins: 'bold italic lists link image',
        toolbar: 'bold italic | bullist numlist | link image',
        height: 600,
        // 不要添加format: 'text'配置
      }}
      onEditorChange={handleContentChange}
    />
  )
}

2. 前端正确渲染富文本HTML #

React没有提供直接渲染HTML字符串的语法，需要通过官方预留的dangerouslySetInnerHTML属性处理，注意根据内容可信度做XSS防护：

可信内容场景（如个人博客后台自发布内容） #

直接传入解析后的HTML即可：

export default function BlogDetail({ articleContent }) {
  // articleContent为从后端拉取的TinyMCE输出内容
  return (
    <article 
      className="blog-content"
      dangerouslySetInnerHTML={{ __html: articleContent }}
    />
  )
}

注意：dangerouslySetInnerHTML会将传入的字符串直接解析为DOM，如果内容来自不可信的普通用户输入，会存在XSS注入风险，必须先做内容过滤。

公开内容场景（需防XSS注入） #

先通过白名单过滤机制，仅保留富文本需要的安全标签（p、strong、em、ul、ol、li、span、a、img、h1-h6等），移除script、iframe、on事件属性等危险内容，再做渲染。生产环境直接用DOMPurify做过滤即可：

import DOMPurify from 'dompurify';

export default function BlogDetail({ articleContent }) {
  const safeContent = DOMPurify.sanitize(articleContent);
  return (
    <article 
      className="blog-content"
      dangerouslySetInnerHTML={{ __html: safeContent }}
    />
  )
}

3. 补充富文本默认样式 #

如果渲染后DOM结构中已经存在<strong>、<em>等标签，但视觉上没有粗体、斜体效果，检查全局CSS重置逻辑即可：

• 排查是否存在strong { font-weight: normal; }、em { font-style: normal; }这类覆盖标签默认样式的规则
• 给文章容器添加作用域样式，保证富文本样式正常展示：

.blog-content strong {
  font-weight: 700;
}
.blog-content em {
  font-style: italic;
}
.blog-content p {
  margin: 1em 0;
  line-height: 1.75;
}
.blog-content ul, .blog-content ol {
  padding-left: 2em;
  margin: 1em 0;
}

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