如何将MongoDB存储的JSON数据正确加载回EditorJS编辑器

架构老林

2026-10-3

你的代码存在3处核心问题，修正后即可正常实现数据回显：

挂载配置拼写错误：EditorJS初始化参数中指定挂载DOM的属性是holder，你写错成了holderID，导致编辑器初始化异常，自带的data参数自然不生效
render方法传参错误：editor.render()接收的是EditorJS标准数据对象本身，你额外套了一层{description}，相当于传入的结构是{description: 实际数据}，不符合要求无法渲染
可能存在数据类型问题：从MongoDB取出的description如果是序列化后的JSON字符串，需要先转成JS对象才能被识别，你手动复制控制台打印内容粘贴时本质是把字符串转成了对象格式，所以能正常加载

场景1：初始化时直接传入数据（推荐写法）

如果确认你的description已经是符合EditorJS格式的JS对象，直接修正初始化参数即可：

const description = data.description;
// 如果从数据库取到的是JSON字符串，先执行解析
// const description = JSON.parse(data.description);

const editor = new EditorJS({
  // 修正挂载属性名
  holder: 'editorjs',
  tools: {
    // 你的原有工具配置保持不变
  },
  // 直接传入数据，初始化完成会自动渲染
  data: description
});

场景2：编辑器就绪后手动触发渲染

如果需要在特定时机才加载数据，使用如下写法：

const description = data.description;
// 字符串转对象的步骤不要漏
// const description = JSON.parse(data.description);

const editor = new EditorJS({
  holder: 'editorjs',
  tools: {
    // 原有工具配置
  }
});

editor.isReady.then(() => {
  // 直接传入数据对象，不要额外包装
  editor.render(description);
}).catch((err) => {
  console.error('渲染出错：', err);
});