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

Question

如何嵌入任何富文本编辑器或降价以响应 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 }}>