React 上的 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