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 vote376 views1 answer
React recursive component
Javascript React
0 vote361 views2 answers
Mqtt js react-native
Javascript React
1 vote357 views3 answers
Sticky footer react
Javascript React
5 votes383 views3 answers
How to scroll to an element javascript react
Javascript React
18 votes473 views3 answers
How to setup tailwind for reactjs
Javascript React
12 votes333 views1 answer
Suspense react
Javascript React
0 vote352 views1 answer
Text decoration react native
Javascript React
0 vote371 views1 answer
Horizontal cards react bootstrap
Javascript React
0 vote366 views3 answers
Add webpack to react project
Javascript React
9 votes388 views2 answers
Html emmet in react vscode
Javascript React