Integrating editor.js in a react application

[ajitesh13]

I was trying to use the react plugin react-editor-js of editor.js but couldn't access the data returned by the editor, in any way.I want to know can I directly integrate editor.js in a react application without using the react-editor-js ?

[ysqsimon]

I'm not quite sure why you can't access the data, but if you have read the react version doc carefully, the second parameter of the "onChange" API, "newData", is the data returned by the editor. I've tried it and it works as expected.
However, you CAN just use the original editor.js in React app in three steps(I'm not 1000% sure but it works fine for me):

import EditorJS from '@editorjs/editorjs'

2. you need to create the instance somewhere before componentDidMount, maybe like

constructor(props){
   super(props)
   this.editor = new EditorJS({
    /**
     * Id of Element that should contain Editor instance
     */
    holder: 'editorjs',
  })
}

3. connect the instance with a DOM element <div id="editorjs" />, note the id is the holder of the instance

More specific usage about the instance I recommend the html example as a starting point https://github.com/codex-team/editor.js/blob/release/2.18/example/example.html

[ajitesh13]

Thanks @ysqsimon. Can you tell me how to render out the saved data in an uneditable format ?

[ajitesh13]

More specific usage about the instance I recommend the html example as a starting point https://github.com/codex-team/editor.js/blob/release/2.18/example/example.html

I am sorry, I couldn't find the html page you referred here.

[ysqsimon]

Thanks @ysqsimon. Can you tell me how to render out the saved data in an uneditable format ?

If you mean to just display data definitely check out this post #609, and I updated link above should work now

[lsbyerley]

@ysqsimon Even though react-editor-js isn't the official react component of editor-js, do you still recommend it as an option in a react application? Or is there something else?

[gohabereg]

Hi @lsbyerley,
There are several options for React made by community. You can find couple of them here — https://github.com/editor-js/awesome-editorjs#javascript

We'd like to focus on core development at the moment. As for ecosystem, we are relying on the community until we have enough resources to make it "official".

I close the thread