ReactJs 羽毛笔编辑器为文本添加颜色不适用于已部署的应用程序答案

【问题标题】：ReactJs quill editor add color to text not working for deployed appReactJs 羽毛笔编辑器为文本添加颜色不适用于已部署的应用程序
【发布时间】：2022-11-09 20:56:34
【问题描述】：

我在我的反应项目中使用羽毛笔编辑器来编辑文本。我已经使用 Nginx 在 ubuntu 服务器上部署了 react 应用程序。有一项为文本添加颜色的功能，但此功能不适用于托管应用程序。它在我的本地机器上运行良好。我无法弄清楚这个问题的原因。

在我的本地机器上工作： Screenshot 1

不适用于托管应用程序： Screenshot 2

import "react-quill/dist/quill.snow.css";
import dynamic from "next/dynamic";
import { useEffect, useState } from "react";

const modules = {
  toolbar: [
    [{ header: "1" }, { header: "2" }, { font: [] }],
    [{ size: [] }],
    ["bold", "italic", "underline", "strike", "blockquote"],
    [
      {
        color: ["red", "blue", "yellow"],
      },
    ],
    [
      { list: "ordered" },
      { list: "bullet" },
      { indent: "-1" },
      { indent: "+1" },
    ],
    ["link", "image", "video"],
    ["clean"],
  ],
  clipboard: {
    // toggle to add extra line breaks when pasting HTML:
    matchVisual: false,
  },
};

const formats = [
  "header",
  "font",
  "size",
  "bold",
  "italic",
  "underline",
  "strike",
  "blockquote",
  "list",
  "bullet",
  "indent",
  "link",
  "image",
  "video",
  "color",
];

const QuillNoSSRWrapper = dynamic(import("react-quill"), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
});

export default function ShowQuill(props) {
  const [description, setDescription] = useState("");
  const [editMode, setEditMode] = useState(false);

  useEffect(() => {
    setDescription(props.description);
  }, [props]);

  const onDescSave = () => {
    setEditMode((prevState) => !prevState);
    if (props.type === "carer_support") {
      if (editMode) {
        props.onDescriptionSave(props.index, description);
      }
    } else if (props.type === "carer_story") {
      if (editMode) {
        props.onDescriptionSave(
          props.carer_story_index,
          props.index,
          description
        );
      }
    } else if (props.type === "gcsp") {
      if (editMode) {
        props.onDescriptionSave(props.index, description);
      }

    }
    else if (props.type === "behaviour") {
      if (editMode) {
        props.onDescriptionSave(description, props.wh_section_index, props.behaviour_index, props.sub_section_index, props.sub_header_index, props.sub_h_sub_sec_index);
      }

    }
  };

  return (
    <>
      <button
        onClick={onDescSave}
        type="button"
        className="btn btn-success m-2"
      >
        {editMode ? "Save" : "Enable Edit Mode"}
      </button>
      {editMode ? (
        <QuillNoSSRWrapper
          theme="snow"
          modules={modules}
          formats={formats}
          placeholder="compose here"
          value={description}
          onChange={setDescription}
        />
      ) : (
        <div dangerouslySetInnerHTML={{ __html: description }} />
      )}
    </>
  );
}

【问题讨论】：

请提供足够的代码，以便其他人可以更好地理解或重现该问题。

标签： reactjs quill react-quill

【解决方案1】：

当我将 nextjs 项目从 11 升级到 12 时，我遇到了同样的问题。

根据this issue，它似乎与next.config.js 中的swcMinify 属性有关。

当我从next.config.js 中删除此行时，一切正常

// swcMinify: true

希望它也适合你。

【讨论】：