React+Material UI博客：TinyMCE HTML内容渲染显示标签如何解决？

问题 #

用React + Material UI搭建博客，集成TinyMCE编辑器后，文章内容已以HTML格式存入JSON，但前端渲染单篇文章时，显示的是带所有HTML标签的原始文本，而非带段落、格式的正常内容。试过.getContent({ format: 'text' })没用，希望不依赖额外npm包解决。

解决方法 #

React默认会转义HTML内容来避免XSS风险，要渲染原始HTML结构，直接用内置的dangerouslySetInnerHTML属性即可：

基础用法 #

假设从JSON获取的文章内容存在post.body变量中，在组件里这样渲染：

<div dangerouslySetInnerHTML={{ __html: post.body }} />

样式优化（可选） #

TinyMCE生成的内联样式可能和你的博客样式冲突，用Material UI的组件或自定义容器做样式隔离：

import Box from '@mui/material/Box';

<Box
  sx={{
    '& p': { margin: '0 0 1rem', lineHeight: 1.6 },
    '& strong': { fontWeight: 700 },
    '& ul': { paddingLeft: '1.5rem', margin: '1rem 0' },
    // 根据需求添加更多样式覆盖
  }}
  dangerouslySetInnerHTML={{ __html: post.body }}
/>

关于.getContent({ format: 'text' })的问题 #

这个方法是提取纯文本，会丢失所有格式标记，而你需要保留HTML结构来渲染排版，所以应该保留getContent()默认的HTML输出，再用dangerouslySetInnerHTML解析渲染。

安全提示 #

dangerouslySetInnerHTML的命名是为了提醒你注意XSS风险，如果内容来自用户提交，建议手动过滤掉<script>、<iframe>等危险标签，避免恶意代码执行。

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