Блог

Как встроить любой редактор форматированного текста или уценку в react js и как я могу хранить данные редакторов в mongodb?

Вы можете использовать популярные библиотеки, такие как 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 }}>