Editor.js 功能组件从数据库中检索数据并在编辑器中显示

编程问答 2022-04-21

问题描述

所以我无法将存储在 mongdb 中的数据显示回编辑器中。

我试过这样保存数据，但没有任何运气

我使用 Editorjs-parser 包和 Editor.js

这也位于一个功能组件中


const blogPostSchema = new mongoose.Schema({  
  body: {
    type: Array,},});


import EditorJs from "react-editor-js";
import List from "@editorjs/list";
import LinkTool from "@editorjs/link";
import Header from "@editorjs/header";
import Paragraph from "editorjs-paragraph-with-alignment";
import edjsHTML from "editorjs-html";
import Imagetool from "@editorjs/image";

 const instanceRef = useRef(null);
 let data = {};


const EDITOR_JS_TOOLS = {
  list: List,linkTool: LinkTool,header: Header,paragraph: Paragraph,// imagetool: Imagetool,image: {
    class: Imagetool,config: {
      endpoints: {
        endpoint: "#"
      },};

 

 <EditorJs
    instanceRef={(instance) => (instanceRef.current = instance)}
    tools={EDITOR_JS_TOOLS}
    data={data}
    onChange={handleChange}
  />


 const handleChange = async () => {
    const savedData = await instanceRef.current.save();
     const HTML = edjsParser.parse(savedData);
     const string = HTML;
     const parse = string.join(" ");
    setBody(parse);

  };

// I then save this to the database

这种方式可以更轻松地从数据库中提取它并显示具有 html 但我无法将其插入编辑器

如何将数据保存为 Editor.js 可以在从数据库拉回后读取的格式并将其显示回 Editor.js 中以备编辑和重新保存？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

editorjsjavascriptmongodbmongodbreactjsreactjsreactjsreactjs