How to add editor in React js web APP and to store data in mongodb

Question

How to embed any rich text editor or markdown to react js , and how can I store the editors data in mongodb?

Answer 1

You can use popular libraries like ReactQuill. Its implementation is very straightforward

import React, { useState } from "react";
import ReactQuill from "react-quill";

// UI
import "react-quill/dist/quill.snow.css";

function App() {
  const [value, setValue] = useState("");

  const modules = {
    toolbar: [
      [{ header: [1, 2, false] }],
      ["bold", "italic", "underline", "strike"],
      [
        { list: "ordered" },
        { list: "bullet" },
        { indent: "-1" },
        { indent: "+1" }
      ],
      ["link", "image"],
      ["clean"]
    ]
  };

  const formats = [
    "header",
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "list",
    "bullet",
    "indent",
    "link",
    "image"
  ];

  // CSS Styles
  const styles = {
    color: "red",
    backgroundColor: "white",
    border: "1px solid red"
  };

  return (
    <ReactQuill
      theme="snow"
      modules={modules}
      style={styles}
      formats={formats}
      value={value}
      onChange={setValue}
    />
  );
}

export default App;

You will get its output in HTML format like this

<p>Hello World</p> 

so you can store it as a string in MongoDB or in any other database. Also if you want to display it in the browser, use dangerouslySetInnerHTML

      <div dangerouslySetInnerHTML={{ __html : __SAVED_HTML_STRING_FROM_DB }}>