React+TinyMCE+DRF集成：前端HTML标签显示问题求助

我来帮你搞定这个问题！你遇到的核心问题是React默认会自动转义所有HTML内容，目的是防止XSS攻击，所以直接输出从数据库拿到的HTML字符串时，浏览器会把它当成普通文本显示，而不是解析渲染。下面给你两种可靠的解决方案，还会附上安全注意事项：

方案1：使用dangerouslySetInnerHTML直接渲染HTML #

这是React官方提供的用于渲染原始HTML的方式，虽然名字带"dangerously"，但只要你确保内容是可信的（比如是自己用TinyMCE生成的，或者后端做了安全过滤），就可以放心使用。

类组件示例 #

假设你要在组件里展示保存的content：

// 展示HTML内容的部分
<div dangerouslySetInnerHTML={{ __html: this.state.content }} />

函数组件示例 #

如果是函数式组件，写法类似：

const [content, setContent] = useState('');
// ... 获取数据后更新content

// 渲染部分
<div dangerouslySetInnerHTML={{ __html: content }} />

方案2：确保TinyMCE样式同步（可选但重要） #

如果渲染后的HTML样式和编辑器里的不一样，记得在展示组件里导入TinyMCE的基础样式，保证排版一致：

import 'tinymce/tinymce.min.css';
import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/skins/content/default/content.min.css';

关键安全提醒：防止XSS攻击 #

因为dangerouslySetInnerHTML会直接渲染所有HTML，所以一定要在**后端（DRF）**对保存的内容做安全过滤，避免恶意代码注入。推荐用bleach库来处理：

1. 先安装bleach：

pip install bleach

2. 在DRF序列化器里添加验证逻辑：

import bleach
from rest_framework import serializers
from .models import YourModel

class YourModelSerializer(serializers.ModelSerializer):
    content = serializers.CharField()

    def validate_content(self, value):
        # 自定义允许的HTML标签和属性，按需调整
        allowed_tags = bleach.ALLOWED_TAGS + [
            'p', 'h1', 'h2', 'h3', 'ul', 'ol', 'li', 'a', 'img', 
            'strong', 'em', 'br', 'hr', 'table', 'tr', 'td', 'th'
        ]
        allowed_attributes = bleach.ALLOWED_ATTRIBUTES.copy()
        allowed_attributes.update({
            'a': ['href', 'target', 'rel'],
            'img': ['src', 'alt', 'width', 'height']
        })
        # 过滤危险内容
        cleaned_content = bleach.clean(
            value, 
            tags=allowed_tags, 
            attributes=allowed_attributes,
            strip=True  # 移除不允许的标签
        )
        return cleaned_content

    class Meta:
        model = YourModel
        fields = '__all__'

确认你的TinyMCE配置没问题 #

看了你的代码，handleEditorChange里用e.target.getContent({ format: 'html' })是正确的，这部分已经确保保存的是HTML格式，所以问题确实出在前端展示环节，用上面的方案就能解决啦！

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