Rich editor react

import React, { useState, useRef } from "react";
import JoditEditor from "jodit-react";
import "./styles.css";

export default function App() {
  const editor = useRef(null);
  const [content, setContent] = useState("Start writing");
  const config = {
    readonly: false,
    height: 400
  };
  const handleUpdate = (event) => {
    const editorContent = event.target.innerHTML;
    setContent(editorContent);
  };

  return (
    <div className="App">
      <h1>React Editors</h1>
      <h2>Start editing to see some magic happen!</h2>
      <JoditEditor
        ref={editor}
        value={content}
        config={config}
        onBlur={handleUpdate}
        onChange={(newContent) => {}}
      />
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </div>
  );
}

Source: sanity.io

Similar codes

0 vote188 views1 answer
About react frame
Javascript React
1 vote205 views1 answer
Import json file in react native
Javascript React
32 votes178 views1 answer
React-router react-router-dom
Javascript React
1 vote190 views1 answer
React place div at center of page
Javascript React
0 vote158 views1 answer
Ctx beginpath react
Javascript React
0 vote179 views1 answer
React auto import sometime not working
Javascript React
126 votes298 views4 answers
Npm create react app
Javascript React
11 votes245 views4 answers
React native text underline
Javascript React
4 votes179 views1 answer
React propthpes or
Javascript React
0 vote213 views1 answer
React native typescript nodejs timeout
Javascript React