react-editor-js icon indicating copy to clipboard operation
react-editor-js copied to clipboard

When I need to render the data in the editor with data, there is no way to render it properly

Open makejun168 opened this issue 3 years ago • 0 comments

Feature Request

When I saved the Editor data by network and then I need to render the data in the editor, there is no way to render it properly

Basic example

import React, { useEffect, useState } from "react";
import EditorJs from "@natterstefan/react-editor-js";

const TestEditor = () => {
  const [data, setData] = useState({});
  const [renderData, saveRenderData] = useState(null);
  let editor = null;

  const getDataByNetwork = async () => {
    /**
     * http Request code
     */
  };

  /**
   * get
   */
  useEffect(() => {
    const renderData = getDataByNetwork();
    setData(renderData);
  }, []);

  const onSave = async () => {
    // https://editorjs.io/saving-data
    try {
      const outputData = await editor.save();
      console.log("Article data: ", outputData);
    } catch (e) {
      console.log("Saving failed: ", e);
    }
  };

  return (
    <div>
      <button onClick={onSave}>Save</button>
      {/* docs: https://editorjs.io/configuration */}
      <EditorJs
        data={data}
        // will be `editorjs` by default
        holder="custom-editor-container"
        editorInstance={(editorInstance) => {
          // invoked once the editorInstance is ready
          editor = editorInstance;
        }}
      >
        <div id="custom-editor-container" />
      </EditorJs>
    </div>
  );
};

export default TestEditor;

Motivation

This feature does not seem to be supported by the official Editorjs, and I hope good developers can support it ! thank u

makejun168 avatar Jun 22 '21 09:06 makejun168