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

可以用hooks来实现，这样写：

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

React 上的 EditorJS

EditorJS on React

javascript

oop

rich-text-editor

reactjs

editorjs