反应鹅毛笔公式和列表

Question

我在项目中使用 React-quill，遇到了 2 个问题

1. 每当我使用有序和无序列表（项目符号和数字）编写内容，然后保存到我的数据库，然后在需要时获取，然后显示（dangerouslySetInnerHTML），那么它会显示内容，但不显示我使用的项目符号和数字列表

2. 每当我点击react-quill的公式按钮时，公式栏就会移出我正在使用的模式，并且不固定在一个地方，有时它会出现在页面的中心，有时会移出我正在使用的模式

3. 问题1的图像 我.

   二.

4. 问题2的图像 我.

   二.

代码： 这是React Quill配置

import React, { useState, useEffect } from 'react';
     import axios from 'axios';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import Modal from './Modal';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { FaEdit } from 'react-icons/fa';
import katex from "katex";
import "katex/dist/katex.min.css";
import CustomToolbar from './CustomToolbar';
import 'quill-emoji/dist/quill-emoji.css';

window.katex = katex;

const QuillEditorTextModal = ({
  isVisible,
  onClose,
  isEditorial,
  initialValue,
  contestId,
  contestPlatform,
  questionNo,
  onSubmit,
  problemName,
}) => {
  const [editorValue, setEditorValue] = useState('');
  const [previousValue, setPreviousValue] = useState('');
  const [isEditing, setIsEditing] = useState(false);

  useEffect(() => {
    if (isEditorial) {
      getEditorialDeltas();
    } else {
      setEditorValue(initialValue || 'No Editorial Added Yet For This Question');
    }
  }, [isEditorial, initialValue]);

  const getEditorialDeltas = async () => {
    try {
      const response = await axios.get('http://localhost:8080/getEditorial', {
        params: {
          contestPlatform: contestPlatform,
          contestId: contestId,
          questionNo: questionNo,
        },
      });

      const deltas = response.data?.editorial[0] || '';
      setEditorValue(deltas);
      setPreviousValue(deltas);
    } catch (error) {
      console.error(error);
    }
  };

  const handleCancelClick = () => {
    setEditorValue(previousValue);
    setIsEditing(false);
  };

  const handleEditClick = (e) => {
    e.stopPropagation();
    setIsEditing(true);
  };

  const saveEditorialData = async (deltas) => {
    try {
      await axios.patch('http://localhost:8080/updateEditorial', {
        contestPlatform: contestPlatform,
        contestId: contestId,
        questionNo: questionNo,
        deltas,
      });

      onSubmit();
      toast.success('Data submitted successfully!');
    } catch (error) {
      console.error(error);
      toast.error('Failed to submit data. Please try again.');
    }
  };

  const handleEditorModalSubmit = () => {
    saveEditorialData(editorValue);
    setIsEditing(false);
  };

  const handleQuillChange = (value) => {
    console.log(value);
    setEditorValue(value);
  };

  const modules = {
    toolbar: {
      container: "#toolbar",
    },
  };
  const formats = [
    'font', 'size',
    'bold', 'italic', 'underline', 'strike',
    'color', 'background',
    'script',
    'header', 'blockquote', 'code-block',
    'indent', 'list',
    'direction', 'align',
    'link', 'image', 'video', 'formula',
  ];

  return (
    <Modal isVisible={isVisible} onClose={onClose}>
      <div className="p-8 text-center relative">
        <div className="mb-3">
          <h3 className="text-xl font-semibold text-grey-900">{isEditorial ? 'Editorial' : 'Edit Editorial'}</h3>
          <h4 className="text-lg font-semibold mb-2">{problemName}</h4>
        </div>
        <div className="flex justify-end items-start mt-3 absolute top-0 right-0">
          {isEditing ? (
            <FaEdit className="cursor-pointer ml-2 text-blue-500" onClick={handleCancelClick} />
          ) : (
            <FaEdit className="cursor-pointer ml-2 text-blue-500" onClick={handleEditClick} />
          )}
          {!isEditing && <span className="text-gray-500 italic ignore-close">Click pencil to edit</span>}
        </div>
        {isEditing ? (
          <>
            <CustomToolbar />
            <ReactQuill
              value={editorValue}
              onChange={handleQuillChange}
              placeholder={isEditorial ? 'Edit your text here' : 'Enter your text here'}
              modules={modules}
              formats={formats}
              className="quill-editor"
            />
          </>
        ) : (
          <div className="quill-editor" dangerouslySetInnerHTML={{ __html: editorValue }} />
        )}
        {isEditing && (
          <div className="flex justify-end mt-4">
            <button className="text-gray-500 italic mr-4 ignore-close" onClick={handleCancelClick}>
              Cancel
            </button>
            <button
              className="bg-blue-500 text-black py-2 px-4 rounded hover:bg-blue-700"
              onClick={handleEditorModalSubmit}
            >
              {isEditorial ? 'Update Editorial' : 'Submit Editorial'}
            </button>
          </div>
        )}
      </div>
    </Modal>
  );
};

export default QuillEditorTextModal;

这是自定义工具栏

import React from "react";
import formats from "./ToolbarOptions";
const renderOptions = (formatData)=>{
    const {className,options} = formatData;
    return (
        <select className = {className}>
            <option selected="selected"></option>
            {
                options.map(value =>{
                    return (
                        <option value={value}></option>
                    )
                })
            }
        </select>
    )
}
const renderSingle = (formatData)=>{
    const {className,value} = formatData;
    return (
        <button className = {className} value = {value}></button>
    )
}
const CustomToolbar = () => (
    <div id="toolbar">
        {
            formats.map(classes => {
                return (
                    <span className = "ql-formats">
                        {
                            classes.map(formatData => {
                                return formatData.options?renderOptions(formatData):renderSingle(formatData)
                            })
                        }
                    </span>
                )
            })
        }
    </div>
  )
  export default CustomToolbar;

这是我的模态代码

import React from 'react';

const Modal = ({ isVisible, onClose, children }) => {
  if (!isVisible) return null;

  const handleClose = (e) => {
    if (e.target.id === 'wrapper' || e.target.classList.contains('close-button')) {
      onClose();
    }
  };

  return (
    <div className='fixed inset-0 flex justify-center items-center' id='wrapper' onClick={handleClose}>
      <div className='fixed inset-0 bg-black bg-opacity-25'></div>
      <div className='relative z-10 bg-white p-6 rounded w-1/2 h-3/4 max-h-[75%] max-w-[50%] overflow-y-auto'>
        <button className='absolute top-2 right-2 text-black text-xl close-button' onClick={handleClose}>
          X
        </button>
        {children}
      </div>
    </div>
  );
};

export default Modal;

请帮助我过去 1 周被困在这里

Answer 1

对于您提出的第一个问题，当您需要完全按照您在 Quill 编辑器中编写的内容显示内容时，您需要导入

'react-quill/dist/quill.snow.css'

文件。