为什么我的应用中Strapi富文本内容的标记代码始终可见无法渲染？

核心原因 #

Strapi的富文本字段仅返回原始内容串：默认编辑器返回Markdown格式字符串，替换为react-quill后返回HTML格式字符串。应用端未对返回的原始串做对应解析渲染，才会直接展示原始代码，该问题与Strapi后台编辑器配置无关。

不同场景解决方法 #

场景1：使用Strapi默认Markdown编辑器 #

• 应用端安装对应技术栈的Markdown渲染库：React项目可用react-markdown，Vue项目可用markdown-it，通用JS项目可用marked
• 将Strapi接口返回的富文本原始字符串传入渲染组件/方法，即可正常解析出换行、标题、列表等格式
• 若需要支持代码块高亮，可搭配highlight.js等库共同使用

场景2：替换编辑器为react-quill（返回HTML内容） #

前端框架默认会转义动态插入的HTML内容避免XSS攻击，因此HTML标签会直接显示为普通文本，使用框架提供的原生HTML渲染能力即可：

• React项目：使用dangerouslySetInnerHTML属性，示例代码：

<div dangerouslySetInnerHTML={{ __html: strapiRichTextHtml }} />

• Vue项目：使用v-html指令，示例代码：

<div v-html="strapiRichTextHtml"></div>

• 原生JS项目：使用innerHTML属性赋值，示例代码：

document.querySelector('.content').innerHTML = strapiRichTextHtml

• 安全提示：如果富文本允许普通用户提交内容，建议先用xss过滤库处理HTML字符串后再渲染，避免XSS安全风险。

内容的提问来源于stack exchange，提问作者Rom-888