Python前后端分离项目中如何通过JSON传输富文本数据？

在前后端分离项目中，通过JSON传输富文本数据，核心是处理好HTML内容的转义和编码。富文本（通常包含HTML标签）直接作为字符串放入JSON即可，但要注意特殊字符的处理。

前端（JavaScript）示例： 发送数据时，通常不需要特殊处理，富文本编辑器（如Quill、TinyMCE）的值本身就是字符串。

// 假设从富文本编辑器获取内容
let richTextContent = document.getElementById('editor').innerHTML;
// 或使用编辑器实例：quill.root.innerHTML

let dataToSend = {
    title: "文章标题",
    content: richTextContent, // 直接放入对象
    author: "作者"
};

// 使用fetch发送POST请求
fetch('/api/save-article', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(dataToSend)
});

后端（Python Flask）示例： 接收时解析JSON，注意HTML内容可能包含引号等需要转义的字符，但JSON解析器会自动处理。

from flask import Flask, request, jsonify
import json

app = Flask(__name__)

@app.route('/api/save-article', methods=['POST'])
def save_article():
    # 直接获取JSON数据
    data = request.get_json()
    
    # 提取富文本内容
    title = data.get('title')
    content = data.get('content')  # 这里就是富文本HTML字符串
    author = data.get('author')
    
    # 示例：打印或存储到数据库
    print(f"标题: {title}")
    print(f"内容: {content[:100]}...")  # 打印前100字符
    print(f"作者: {author}")
    
    # 这里可以将其存入数据库（如SQLAlchemy模型）
    # article = Article(title=title, content=content, author=author)
    # db.session.add(article)
    # db.session.commit()
    
    return jsonify({"status": "success", "message": "文章保存成功"})

if __name__ == '__main__':
    app.run(debug=True)

关键点：

1. Content-Type：必须设置为application/json。
2. HTML特殊字符：JSON格式本身会处理双引号等字符的转义（如"变成\"），所以富文本中的HTML标签（如<p>）可以安全传输。
3. 安全性：富文本内容在展示时要小心XSS攻击，后端存储时通常不需要转义（保持原始HTML），但在前端渲染时要根据框架使用安全的方式（如Vue的v-html，React的dangerouslySetInnerHTML）。
4. 数据库存储：直接将HTML字符串存入TEXT或LONGTEXT类型字段。

简单总结： 把富文本当普通字符串处理，JSON和HTTP协议会搞定编码和传输。