基于ReactJS、NodeJS在MongoDB存储富文本编辑器（含图片）数据

一、改用Quill的Delta格式存储数据 #

Quill原生支持Delta格式，这是一种结构化JSON数据，能明确区分文本、图片及样式信息，彻底解决HTML格式无法分离内容的问题。

• 获取Delta数据：提交编辑器内容时，调用quill.getContents()获取完整结构化数据，包含所有文本、图片（base64或远程URL）和样式标记。

  // 获取Quill Delta格式的完整内容
  const deltaContent = quill.getContents();
  

• 存入MongoDB Atlas：直接将Delta JSON对象存入数据库（MongoDB原生支持JSON存储），无需额外转换。示例Mongoose Schema：

  const BlogPostSchema = new mongoose.Schema({
    title: String,
    content: Object, // 存储Delta格式数据
    createdAt: Date
  });
  

二、图片存储优化（可选） #

若使用base64格式存储图片导致数据体积过大，建议先上传图片到云存储，再替换Delta中的图片地址为远程URL：

1. 监听Quill的image-added事件，拦截本地图片并上传：

   quill.on('image-added', async (image, callback) => {
     // 上传图片到云存储，获取远程访问URL
     const imageUrl = await uploadImageToCloud(image);
     // 将图片地址替换为远程URL后插入编辑器
     callback(imageUrl);
   });
   

2. 上传完成后，Delta中的图片数据会自动更新为远程URL，再存入数据库即可。

三、React页面展示Delta内容 #

使用react-quill组件直接渲染Delta格式数据，无需解析HTML：

1. 安装依赖：

   npm install react-quill quill
   

2. 在React组件中渲染博客内容：

   import ReactQuill from 'react-quill';
   import 'react-quill/dist/quill.snow.css';
   
   const BlogPost = ({ post }) => {
     return (
       <div className="blog-post">
         <h1>{post.title}</h1>
         <ReactQuill
           value={post.content}
           readOnly={true}
           theme="snow"
         />
       </div>
     );
   };
   

3. 如需单独提取图片或纯文本，直接遍历Delta的ops数组：

   // 提取所有图片URL
   const extractImages = (delta) => {
     return delta.ops
       .filter(op => op.insert && typeof op.insert === 'object' && op.insert.image)
       .map(op => op.insert.image);
   };
   
   // 提取纯文本内容
   const extractText = (delta) => {
     return delta.ops
       .map(op => typeof op.insert === 'string' ? op.insert : '')
       .join('');
   };
   

四、修复历史HTML数据（可选） #

若之前已存储HTML格式数据，可将其转换为Delta格式后重新存入：

import Quill from 'quill';

// HTML转Delta格式
const htmlToDelta = (html) => {
  const tempQuill = new Quill(document.createElement('div'));
  tempQuill.root.innerHTML = html;
  return tempQuill.getContents();
};

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