Next.js中Quill.js编辑正常但发布博客仅显示纯文本问题

1. 渲染端的样式依赖完全没生效 #

这是Next.js + Quill组合下最高发的问题，很多人以为引了编辑器CDN就万事大吉，忽略了Quill的样式规则是带作用域前缀的：

• Quill的所有格式样式（标题、加粗、引用、列表等）的选择器都默认绑定ql-snow/ql-bubble的主题父类，如果你在博客详情页渲染内容的容器没加和编辑器一致的主题类名，哪怕样式文件全加载了，CSS选择器也匹配不到内部的HTML元素，所有格式都会失效，表现为无样式的纯文本。
• 如果你是在_document.js里引的Quill CDN资源，要核对CDN版本和本地安装的react-quill、quill依赖版本完全一致，版本不匹配的话样式类名对不上，也会导致格式完全失效。同时要检查生产环境构建后，Quill的CSS资源是不是正常加载：打开浏览器控制台的网络面板，看对应的Quill样式文件是不是返回200状态，有没有被Next.js的内容安全策略拦截、或者路径错误导致404，别只在开发环境验证，生产环境的资源路径经常出问题。
• 注意别把Quill的CSS只挂在编辑器创建页的组件作用域里，Next.js的组件级CSS会在页面切走后被卸载，详情页自然拿不到样式规则，全局样式要放在_app.js或者根布局文件里引入。

2. 存储环节的内容被错误转义/过滤 #

编辑功能正常不代表存到库里的是可用的富文本HTML：

• 检查存库的原始内容，看是不是所有HTML标签都被转成了实体字符（比如<p>被转成了<p>）。很多人在提交表单、走API路由存库的环节，中间件默认开启了HTML转义，或者引入的内容消毒工具配置过严，直接把所有HTML标签都过滤成纯文本，哪怕前端渲染逻辑全对，拿到的也是没有格式的纯字符串。
• 验证方法：直接打开数据库表或者接口返回的原始字段值，看是不是包含<p>、<strong>、<h1>这类原生标签，如果字段值里只有纯文字、没有任何HTML标签，问题就出在存的环节，和渲染端没关系。

3. 渲染逻辑错误 #

• 检查详情页的渲染代码，是不是直接把Quill的HTML字符串当普通文本渲染了。React默认会把JSX里的字符串原样输出，不会解析成HTML，必须通过dangerouslySetInnerHTML属性挂载内容，直接写{blog.content}哪怕存的是完全正确的Quill HTML，也只会显示带尖括号的文本内容。
• 别在渲染环节额外对内容做转义处理，比如手动调用escape()处理内容字符串，会把所有标签转成实体，直接导致渲染失效。

快速定位方法：把从数据库里拿出来的内容字符串复制出来，单独写一个测试HTML文件，手动引入Quill的主题CSS，把这段内容放到带ql-snow类名的div里打开。如果这个测试文件能正常显示格式，说明内容存储没问题，问题百分百出在详情页的容器类名、样式加载环节；如果测试文件也显示纯文本，就顺着存储链路找哪里把HTML标签搞丢了。

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