如何将Lexical编辑器中约2万词的大内容保存至数据库？

针对2万词的Lexical内容保存时触发的请求体过大问题，可通过以下几种方案解决：

1. 调整后端服务的请求大小限制 #

大部分后端框架和服务器默认有请求体大小限制，直接调高即可：

• Express框架：修改json和urlencoded中间件的limit参数

  const express = require('express');
  const app = express();
  // 设置为50MB，可根据实际内容大小调整
  app.use(express.json({ limit: '50mb' }));
  app.use(express.urlencoded({ extended: true, limit: '50mb' }));
  

• Nginx反向代理：在配置文件中修改client_max_body_size

  http {
    client_max_body_size 50M;
  }
  

2. 压缩序列化后的内容 #

前端对序列化的JSON字符串进行gzip压缩后再传输，后端解压后存储，能大幅减少传输体积：

• 前端压缩（浏览器环境）：

  async function compressEditorContent(editorState) {
    const rawJson = JSON.stringify(editorState.toJSON());
    const encoder = new TextEncoder();
    const data = encoder.encode(rawJson);
    // 使用浏览器原生压缩流
    const compressedStream = new CompressionStream('gzip');
    const writer = compressedStream.writable.getWriter();
    await writer.write(data);
    await writer.close();
    // 转为Base64方便HTTP传输
    const compressedData = await new Response(compressedStream.readable).arrayBuffer();
    return btoa(String.fromCharCode(...new Uint8Array(compressedData)));
  }
  

• 后端解压（Node.js）：

  const zlib = require('zlib');
  function decompressContent(compressedBase64) {
    const buffer = Buffer.from(compressedBase64, 'base64');
    return zlib.gunzipSync(buffer).toString('utf8');
  }
  

3. 精简Lexical序列化内容 #

默认的editorState.toJSON()会包含编辑器历史、临时状态等非必要数据，自定义序列化逻辑只保留核心内容：

function serializeMinimalContent(editorState) {
  const fullState = editorState.toJSON();
  // 移除历史记录、编辑器配置等冗余字段
  delete fullState.history;
  delete fullState.editor;
  // 简化节点结构，只保留渲染和存储必需的属性
  fullState.root.children = fullState.root.children.map(node => {
    const { type, children, text, format, style, indent } = node;
    return { type, children, text, format, style, indent };
  });
  return JSON.stringify(fullState);
}

4. 分块上传（超大型内容适配） #

如果内容体积远超常规限制，可将内容分割为多个小块分批上传，后端拼接后存储：

• 前端：将序列化后的内容按固定大小（比如每10KB）分割，携带块序号和总块数发送
• 后端：接收每一块后暂存，待所有块接收完成后合并为完整内容再存入数据库

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