How to get state as JSON from Remirror editor in Reactjs

We have learned how to setup basic proseMirror editor in React using remirror toolkit. What about accessing the state / JSON ?.

Remirror allow us to use a onChange component and then we have define handler for accessing a state.

First import the component remirror react.

import { OnChangeJSON } from "@remirror/react"; 

Secondly include the component in Remirror editor as follows

const RichTextEditor = () => {
  return (
    <div>
      <WysiwygEditor placeholder="I am a text">
        <OnChangeJSON onChange={handleChange} />
      </WysiwygEditor>
    </div>
  );
};

Let’s define the handleChange and access the state. For simplicity we output the JSON to console.

const handleChange = (json) => {
  console.log(JSON.stringify(json));
};

That’s all , 😊.

Open the code in Sandbox

• Create Quill RichText editor using react-quill
• How to get HTML from Remirror editor in Reactjs
• How to get state as JSON from Remirror editor in Reactjs
• Create a TinyMCE Rich Text Editor in React
• Create a Slate Rich Text Editor in React
• Create a Material-UI Rich Text Editor in React
• Create a RichText editor using Quilljs
• Create minimal editor with Tiptap in React
• Create a Social Editor using Remirror toolkit in React
• Create a RichText Editor using Remirror toolkit in React