如何将react-quill编辑器数据高效存储到后端并完整保留格式？

存储方案选择 #

有两种主流存储方案，根据你的业务场景选即可：

• 方案1：直接存储编辑器输出的HTML字符串
  适合场景：博客内容发布后仅需展示、无二次编辑需求
  实现逻辑：
  后端数据库直接存HTML到text/longtext类型字段，前端渲染时直接注入HTML即可完整保留所有格式，开发成本最低。注意渲染前必须对HTML做XSS过滤，避免恶意脚本注入风险。
• 方案2：存储Quill原生Delta结构化数据
  适合场景：需要支持内容后续二次编辑、或有多端渲染需求
  实现逻辑：
  通过Quill实例的getContents()方法获取Delta格式数据，后端直接存JSON格式即可。二次编辑时直接把Delta传入ReactQuill的value属性即可完美还原格式，不存在HTML解析的兼容问题，且数据体积比HTML更小。渲染时需先将Delta转换为HTML再注入页面。

现有代码优化点 #

1. 删除无用样式导入：你同时引入了snow和bubble两个主题的css，实际使用时仅需保留正在使用的主题样式即可，默认用snow主题，删除import "react-quill/dist/quill.bubble.css"减少资源体积。
2. 阻止表单默认提交行为：现有代码中提交按钮位于form标签内，点击后会触发浏览器默认提交刷新页面，需新增onSubmit事件拦截默认行为。
3. 新增内容非空校验：提交前判断内容是否为空，避免无效提交。

优化后代码示例 #

import { useState, useRef } from 'react';
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

const Create = () => {
    const [body, setBody] = useState('');
    const quillRef = useRef(null); // 新增ref用于获取quill实例
    const handleBody = (value) => {
        setBody(value)
    }
    const handleSubmit = (e) => {
        e.preventDefault();
        // 空内容校验
        if(!body.trim()) return alert('内容不能为空');
        // 提交逻辑
        // 方案1：提交HTML的话直接传body即可
        // 方案2：提交Delta的话用下面代码获取
        // const delta = quillRef.current.getEditor().getContents();
        console.log('要提交的内容：', body)
    }
    return (
        <main>
            <div className="form-container">
                <form onSubmit={handleSubmit}>
                    <h2>create post</h2>
                    <ReactQuill
                        ref={quillRef}
                        placeholder='spread your message...'
                        modules={Create.modules}
                        formats={Create.formats}
                        onChange={handleBody}
                        value={body}
                    />
                    <button type="submit" id="submit-btn">post</button>
                </form>
            </div>
        </main>
    )
}

Create.modules = {
    toolbar: [
      [{ 'font': [] }],
      [{ 'size': ['small', false, 'large', 'huge'] }],
      ['bold', 'italic', 'underline'],
      [{'list': 'ordered'}, {'list': 'bullet'}],
      [{ 'align': [] }],
      [{ 'color': [] }, { 'background': [] }],
      ['link', 'image'],
      ['code-block'],
      ['clean']
    ]
};

Create.formats = [
    'font',
    'size',
    'bold', 'italic', 'underline',
    'list', 'bullet',
    'align',
    'color', 'background',
    'link',
    'image',
    'code-block'
  ];

export default Create;

渲染端实现参考（存储HTML场景 #

import xss from 'xss'
// htmlContent为后端返回的HTML内容
const Post = ({htmlContent}) => {
  return <div dangerouslySetInnerHTML={{__html: xss(htmlContent)}} />
}

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