EditorJS on React

Question

So I wanted to check out this new rich text editor Editor, https://editorjs.io/

I installed the unofficial reactJS version, but I'm not quite sure what I'm doing wrong here... https://www.npmjs.com/package/react-editor-js

Has any used this before? can it be done with hooks? my thinking is that I need to define an instance of this editor so I can save the data. because currently onChange the editor is not adding any new blocks to the data object or the entered data.

also, if I passed the data object as an empty object in the console does not show an initial EditorJs block.

any help would be appreciated.

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>
  );
}

Secrecy

Answer 1

You can do this with hooks, write it like this:

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

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

And when you put the component in the return function do it like this:

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

And don't forget to import useRef from react

Cene

but where do you put the handleSave function.. ? – Thorwald

@LucianTarna you can put it into onChange prop of the EditorJS – Colorist

@RodionGolovushkin Not working :( – Querulous

@LucianTarna you can put handleSave function into onClick method of a button. – Rothrock