Implementando un editor de texto enriquecido en React

Implementando un editor de texto enriquecido en React

Prefacio
Para implementar un editor de texto enriquecido en React, podemos usar bibliotecas de terceros existentes, como react-quill, draft-jsetc. Aquí hay react-quillun ejemplo.

Primero necesitas instalar react-quillla biblioteca:

npm install react-quill --save

Luego preséntalo y úsalo en los componentes que necesitan usar el editor de texto enriquecido:

import React, {
    
    useState} from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

function RichTextEditor() {
    
    
  const [editorContent, setEditorContent] = useState("");

  const handleEditorChange = (content, delta, source, editor) => {
    
    
    setEditorContent(content);
  };

  return (
    <div className="rich-text-editor">
      <ReactQuill
        value={
    
    editorContent}
        onChange={
    
    handleEditorChange}
        modules={
    
    {
    
    
          toolbar: [
            [{
    
     header: [1, 2, false] }],
            ["bold", "italic", "underline", "strike", "blockquote"],
            [
              {
    
     list: "ordered" },
              {
    
     list: "bullet" },
              {
    
     indent: "-1" },
              {
    
     indent: "+1" },
            ],
            ["link", "image"],
            ["clean"],
          ],
        }}
        placeholder="请输入内容"
      />
    </div>
  );
}

export default RichTextEditor;

En el código anterior, el uso se usa useStatepara guardar el contenido del editor y handleEditorChangela función se usa para manejar eventos cuando cambia el contenido del editor.

ReactQuillComo cuerpo principal del editor de texto enriquecido, el componente utiliza valuepropiedades onChangepara configurar y obtener el contenido del editor.

modulesLas propiedades se utilizan para configurar el editor de texto enriquecido, donde se utiliza la barra de herramientas incorporada.

placeholderPropiedad utilizada para mostrar el marcador de posición cuando el contenido del editor está vacío.

El componente convertirá automáticamente el contenido del editor a HTMLun formato y el contenido del formato se puede editorContentobtener a través de propiedades HTML.

Además, es necesario cargar archivos en el componente quill.snow.css, que son los archivos de estilo de los que depende el editor.