React上的EditorJS

Question

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

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

以前用过吗？可以用钩子做吗？我的想法是，我需要定义此编辑器的实例，以便保存数据。因为当前onChange编辑器未在数据对象或输入的数据中添加任何新块。

result

此外，如果我在控制台中将数据对象作为空对象传递，则不会显示初始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)
   }

并且当您将组件放入return函数时，请像这样：

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

并且不要忘记从react导入useRef