如何在React js web APP中添加编辑器并在mongodb中存储数据

Question

如何将任何富文本编辑器或markdown嵌入到react js中，以及如何在mongodb中存储编辑器数据？

Answer 1

您可以使用流行的库，如ReactQuill。它的实现非常简单。

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;

您将获得HTML格式的输出，如下所示

<p>Hello World</p> 

因此，您可以将其作为字符串存储在MongoDB或任何其他数据库中。此外，如果要在浏览器中显示它，请使用dangerouslySetInnerHTML

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