Implementando um editor de rich text no React

Implementando um editor de rich text no React

Prefácio
Para implementar um editor de rich text no React, podemos usar bibliotecas existentes de terceiros, como react-quill, draft-jsetc. Aqui está react-quillum exemplo.

Primeiro você precisa instalar react-quilla biblioteca:

npm install react-quill --save

Em seguida, apresente-o e use-o nos componentes que precisam usar o editor de rich text:

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;

No código acima, use é usado useStatepara salvar o conteúdo do editor, e handleEditorChangea função é usada para manipular eventos quando o conteúdo do editor é alterado.

ReactQuillComo corpo principal do editor de rich text, o componente usa valuepropriedades onChangepara definir e obter o conteúdo do editor.

modulesAs propriedades são usadas para configurar o editor de rich text, onde a barra de ferramentas integrada é usada.

placeholderPropriedade utilizada para exibir o placeholder quando o conteúdo do editor está vazio.

O componente converterá automaticamente o conteúdo do editor em HTMLum formato, e o conteúdo do formato pode editorContentser obtido por meio de propriedades HTML.

Além disso, os arquivos precisam ser carregados no componente quill.snow.css, que são os arquivos de estilo dos quais o editor depende.