时间戳

首页 > 解决方案 > React 上的 EditorJS

javascript - React 上的 EditorJS

问题描述

所以我想看看这个新的富文本编辑器编辑器，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>
  );
}

标签： javascriptreactjsooprich-text-editoreditorjs

解决方案

你可以用钩子来做到这一点，这样写：

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

推荐阅读