EditorJS开始反应

Question

所以我想看看这个新的富文本编辑器，编辑器，https://editorjs.io/

我安装了非官方的reactJS版本，但我不太确定我做错了什么.https://www.npmjs.com/package/react-editor-js

以前有用过这个吗？能用钩子做吗？我的想法是，我需要定义这个编辑器的一个实例，这样我就可以保存数据。因为当前的onChange，编辑器没有向数据对象或输入的数据添加任何新的块。

​

​

此外，如果我将数据对象作为控制台中的空对象传递，则不会显示初始EditorJs块。

任何帮助都将不胜感激。

function App() {
  let data = { '1': 'test' }

  return (
    <div className="App">
      <EditorJs
        data={data}
        onChange={(e) => console.log(data)}
        tools={{
          code: Code,
          header: Header,
          paragraph: Paragraph
        }}
      />
    </div>
  );
}

Answer 1

你可以用钩子做这件事，写成这样：

const YourComponent = () => {
  const instanceRef = useRef(null)

  async function handleSave() {
    const savedData = await instanceRef.current.save()
    console.log(savedData)
   }

当您将组件放入返回函数中时，这样做：

        <EditorJS
          instanceRef={(instance) => (instanceRef.current = instance)}
          tools={EDITOR_JS_TOOLS}
          data={data}
        />

别忘了从react中导入useRef