ReactQuill imageHandler 函数无法在文本编辑器中插入图像

Question

我试图限制鹅毛笔只允许一张图像，并且当上传图像时，它会自动添加换行符，但是当我运行代码时，上传图像后鹅毛笔的输入框消失了。

import React, { useState, useRef, useEffect } from "react";
import newD from "./NewDiscussion.module.css";
import "./switch.css";
import "./normalND.css";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

function NewDiscussion({ handleClose }) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [content, setContent] = useState("");
  const quillRef = useRef(null);

  const handleSubmit = async (event) => {
    event.preventDefault();
    setIsSubmitting(true);

    const formData = {
      title: title.trim(),
      category: document.getElementById("category-select").value,
      tags: document.getElementById("tags-select").value,
      description: content,
    };

    try {
      // Placeholder: replace with your actual API call
      const response = await fetch("your-api-endpoint", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });
      const result = await response.json();
      console.log(result); // Handle success
    } catch (error) {
      console.error("Error submitting form:", error);
    }

    setIsSubmitting(false);
    handleClose();
  };

  const imageHandler = () => {
    const input = document.createElement("input");
    input.setAttribute("type", "file");
    input.setAttribute("accept", "image/*");
    input.click();

    input.onchange = async () => {
      const file = input.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onloadend = () => {
          const base64image = reader.result;
          const editor = quillRef.current.getEditor();
          const range = editor.getSelection(true);
          if (range) {
            editor.insertEmbed(range.index, "image", base64image);
            editor.insertText(range.index + 1, "\n");
            editor.setSelection(range.index + 2, 0);
          }
          setContent(editor.root.innerHTML);
        };
        reader.readAsDataURL(file);
      }
    };
  };

  const modules = {
    toolbar: {
      container: [
        ["bold", "italic", "underline"],
        [{ list: "bullet" }, { list: "ordered" }],
        ["link", "image"],
      ],
      handlers: {
        image: imageHandler,
      },
    },
  };

  const formats = [
    "bold",
    "italic",
    "underline",
    "list",
    "bullet",
    "link",
    "image",
  ];

  return (
    <>
      <div className={newD.openComposer}>
        <div className={newD.manupulateButton}>
          <div className={newD.switchContainer}>
            <p>Anonymous</p>
            <input
              id="cmn-toggle-4"
              className="cmn-toggle cmn-toggle-round-flat"
              type="checkbox"
            />
            <label htmlFor="cmn-toggle-4"></label>
          </div>
          <div className={newD.rightIcons}>
            <div className={newD.close} onClick={handleClose}>
              <i className="fa-solid fa-x"></i>
            </div>
          </div>
        </div>
        <div className={newD.editorCont}>
          <div className={newD.textAreaColumn}>
            <form onSubmit={handleSubmit}>
              <input
                type="text"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                placeholder="What is this discussion about in one brief sentence?"
              />
              <div className={newD.selectContainer}>
                <select name="category" id="category-select">
                  <option value="">--Select a category--</option>
                  <option value="Ideas">Ideas</option>
                  <option value="Academics and Career">
                    Academics and Career
                  </option>
                  <option value="Cultural Exchange">Cultural Exchange</option>
                  <option value="Student Support">Student Support</option>
                  <option value="Events and Activities">
                    Events and Activities
                  </option>
                  <option value="Advocacy and Awareness">
                    Advocacy and Awareness
                  </option>
                  <option value="Networking and Collaboration">
                    Networking and Collaboration
                  </option>
                  <option value="Travel and Exploration">
                    Travel and Exploration
                  </option>
                </select>
                <select name="tags" id="tags-select">
                  <option value="">--Optional Tags--</option>
                  <option value="Help">Help</option>
                  <option value="Information">Information</option>
                  <option value="Sports">Sports</option>
                  <option value="Volunteering">Volunteering</option>
                  <option value="Internships">Internships</option>
                </select>
              </div>
              <div className={newD.richTextEditorRow}>
                <ReactQuill
                  theme="snow"
                  value={content}
                  onChange={setContent}
                  modules={modules}
                  formats={formats}
                  style={{ height: "100%", width: "100%" }}
                  ref={quillRef}
                />
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}

export default NewDiscussion;

仅允许一张图像，上传图像后，在鹅毛笔编辑器中添加换行符。

Answer 1

在 ReactQuill 实现中上传图像后输入框消失的问题可能源于您处理图像插入的方式

imageHandler = () => {
  // ... existing code to handle file selection and reading

  if (file) {
    const reader = new FileReader();
    reader.onloadend = () => {
      const base64image = reader.result;
      const editor = quillRef.current.getEditor();
      const range = editor.getSelection(true);
      if (range) {
        editor.insertEmbed(range.index, "image", base64image);
        editor.insertText(range.index + 1, "\n");
        editor.setSelection(range.index + 2, 0);

        // Set only the text content after image insertion
        setContent(editor.getText());
      }
    };
    reader.readAsDataURL(file);
  }
};

通过仅设置文本内容 (

editor.getText()

)，您可以避免包含 HTML 表示中潜在的破坏性元素并保持输入框的可见性。

确保您的 Quill 工具栏配置一次仅允许插入一张图像。您可以通过自定义工具栏选项或使用

imageHandler

中的自定义验证逻辑来实现此目的

考虑使用像

react-quill-image-upload

这样的库，在 ReactQuill 中获得更强大的图像处理功能。