Next.js的React-quill历史

cxfofazt 于 2023-10-18 发布在 React

关注(0)|答案(1)|浏览(139)

我正在尝试将Quill编辑器添加到我的Next.js项目中，并带有History模块（撤消和重做按钮）。我必须使用动态导入，否则，我会得到一个错误，即文档未定义。
下面是我的代码。这是可行的，但我有两个问题：
1.撤消/重做按钮的图标丢失。有一些例子，人们做icons = ReactQuill.Quill.import("ui/icons");，然后分配自定义图标，但我如何访问ReactQuill.Quill与动态导入？
1.当我尝试为“撤消”和“重做”或任何其他按钮添加自定义处理程序时，编辑器从页面中消失，控制台中没有显示任何错误

import dynamic from "next/dynamic";
const ReactQuill = dynamic(
  async () => {
    const { default: RQ } = await import("react-quill");
    return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;
  },
  {
    ssr: false,
  }
);
import showdown from "showdown";
import "react-quill/dist/quill.snow.css";
import { useState, useEffect, useRef } from "react";
import React from "react";
import styles from "./Editor.module.css";

const converter = new showdown.Converter();

export default function Editor({ title, body = "" }) {
  const quillRef = useRef(false);
  const text = title ? "# " + title + "\n\n" + body : body;
  const initialHtml = converter.makeHtml(text);
  const [html, setHtml] = useState(initialHtml);

  return (
    <ReactQuill
      forwardedRef={quillRef}
      theme="snow"
      value={html}
      onChange={setHtml}
      modules={{
        history: {
          delay: 2000,
          maxStack: 300,
          userOnly: true,
        },
        toolbar: {
          container: [
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            ["bold", "italic", "underline"],
            [{ list: "ordered" }, { list: "bullet" }],
            ["link"],
            ["undo", "redo", "image"],
          ],
          handlers: {},
        },
      }}
    />
  );
}

next.js

来源：https://stackoverflow.com/questions/77229851/react-quill-history-with-next-js

1条答案

按热度按时间

flmtquvp1#

发布工作代码，以防有人遇到同样的问题。

import dynamic from "next/dynamic";
const ReactQuill = dynamic(
  async () => {
    const { default: RQ } = await import("react-quill");
    const Quill = RQ.Quill;
    const icons = Quill.import("ui/icons");
    icons["undo"] = `<svg viewbox="0 0 18 18">
        <polygon class="ql-fill ql-stroke" points="6 10 4 12 2 10 6 10"></polygon>
        <path class="ql-stroke" d="M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9"></path>
      </svg>`;
    icons["redo"] = `<svg viewbox="0 0 18 18">
        <polygon class="ql-fill ql-stroke" points="12 10 14 12 16 10 12 10"></polygon>
        <path class="ql-stroke" d="M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5"></path>
      </svg>`;
    return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;
  },
  {
    ssr: false,
  }
);
import showdown from "showdown";
import "react-quill/dist/quill.snow.css";
import { useState, useMemo, useRef } from "react";
import styles from "./Editor.module.css";

const converter = new showdown.Converter();

export default function Editor({ title, body = "" }) {
  const quillRef = useRef(false);
  const text = title ? "# " + title + "\n\n" + body : body;
  const initialHtml = converter.makeHtml(text);
  const [html, setHtml] = useState(initialHtml);

  function undo() {
    if (quillRef.current) {
      const myEditor = quillRef.current.getEditor();
      return myEditor.history.undo();
    }
  }

  function redo() {
    if (quillRef.current) {
      const myEditor = quillRef.current.getEditor();
      return myEditor.history.redo();
    }
  }

  const modules = useMemo(
    () => ({
      history: {
        delay: 2000,
        maxStack: 300,
        userOnly: true,
      },
      toolbar: {
        container: [
          [{ header: [1, 2, 3, 4, 5, 6, false] }],
          ["bold", "italic", "underline"],
          [{ list: "ordered" }, { list: "bullet" }],
          ["link"],
          ["undo", "redo"],
        ],
        handlers: {
          undo: undo,
          redo: redo,
        },
      },
    }),
    []
  );

  return (
    <ReactQuill
      forwardedRef={quillRef}
      theme="snow"
      value={html}
      onChange={setHtml}
      modules={modules}
    />
  );
}

赞(0）回复(0）举报 2023-10-18

我来回答

Next.js的React-quill历史

1条答案

相关问题

热门标签

最新问答