使用React与Next.js搭建博客时编辑文章格式丢失，有适配的第三方包吗？

问题本质与对应解决方案 #

你遇到的格式丢失问题，本质是编辑器产出的富文本/Markdown内容没有被正确解析渲染到React组件中，根据编辑器输出的内容格式，有不同的成熟第三方包可以直接使用：

场景1：编辑器输出为HTML字符串 #

直接用React原生的dangerouslySetInnerHTML渲染存在XSS注入风险，推荐搭配dompurify做内容安全过滤，同时放开行内样式的解析限制就能保留字号、颜色这类自定义编辑格式：

• 安装依赖：npm install dompurify @types/dompurify（TS项目需要安装类型包，纯JS项目可以省略后半段）
• 组件使用示例：

import DOMPurify from 'dompurify';

function ArticleContent({ rawHtml }) {
  return (
    <div 
      dangerouslySetInnerHTML={{ 
        __html: DOMPurify.sanitize(rawHtml, {
          ADD_ATTR: ['style'], // 必须允许style属性，否则自定义行内样式会被默认过滤
          ADD_TAGS: ['iframe', 'video'] // 有嵌入音视频需求可以在这里添加允许的标签
        }) 
      }} 
    />
  )
}

注意：如果没有配置ADD_ATTR: ['style']，dompurify会默认清除所有标签的style属性，刚好就是你遇到的字号、自定义格式丢失的情况

场景2：编辑器输出为Markdown字符串 #

如果后台存储的是Markdown语法的纯文本，推荐用react-markdown做解析渲染，搭配remark-gfm插件可以支持表格、任务列表、删除线等扩展Markdown格式：

• 安装依赖：npm install react-markdown remark-gfm
• 组件使用示例：

import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

function ArticleContent({ rawMarkdown }) {
  return (
    <ReactMarkdown 
      remarkPlugins={[remarkGfm]}
      components={{
        // 可以自定义各类标签的渲染样式，和编辑器的格式规则对齐
        h1: ({node, ...props}) => <h1 className="text-3xl font-bold my-4" {...props} />,
        p: ({node, ...props}) => <p className="my-2 leading-7" {...props} />
      }}
    >
      {rawMarkdown}
    </ReactMarkdown>
  )
}

额外排查点 #

• 如果使用的是Quill、Slate这类自定义数据结构的编辑器，优先使用官方提供的React渲染工具包，不要手动解析内容结构
• 全局样式重置规则不要覆盖富文本内容区的标签样式，比如不要全局给p、h1~h6设置统一的字号、边距，会冲掉编辑器的自定义格式

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