javascript - Nextjs : How to register the quill-blot-formatter to dynamically imported react-quill on client side rendering only?

Question

我正在进口 react-quill仅在客户端动态使用 ssr: false .我的功能组件工作正常，我想添加 quill-blot-formatter打包到modules我的羽毛笔组件的一部分。
我的第一个障碍是，我无法注册 quill-blot-formatter与 Quill如图所示:

ServerError
ReferenceError: document is not defined

这个页面是客户端渲染的，所以我不明白这个错误来自哪里!
这是我的代码:

import dynamic from "next/dynamic";
import BlotFormatter from "quill-blot-formatter";

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

Quill.register("modules/blotFormatter", BlotFormatter);

在这里，不明白怎么带Quill出 react-quill现在它正在动态导入。因此，我认为 Quill.register不工作。现在，我如何注册 quill-blot-formatter与 react-quill ?按照带有 react-quill 的 Next.js 示例，我什至没有将 react-quill 导入为 ReactQuill与包中的默认导出一样。
然后我宣布 blotFormatter像这样的模块。

const modules = {
    blotFormatter: {},  // here
    toolbar: [
        [{header: '1'}, {header: '2'}, {font: []}],
        [{size: []}],
        ...
    ],
}

const formats = ['header','font','size','bold','italic','underline',...]

并用于render()像这样的方法:

export default function NewContent() {
    ...
    render(
        <QuillNoSSRWrapper
            className={styles.quillTextArea}
            id="quilleditor"
            modules={modules}
            formats={formats}
            theme="snow"
            onChange={handleTextChange}
            readOnly={false}
        />
    );
}

到目前为止，这QuillNoSSRWrapper子组件做得很好，但是，我该如何使用 quill-blot-formatter在它的formats ?

Answer 1

更新
您不需要另一个 useEffect 来注册模块，您可以在导入 ReactQuill 时这样做。

const ReactQuill = dynamic(
  async () => {
    const { default: RQ } = await import("react-quill");
    const { default: BlotFormatter } = await import("quill-blot-formatter");
    RQ.Quill.register("modules/blotFormatter", BlotFormatter);
    return function forwardRef({ forwardedRef, ...props }) {
      return <RQ ref={forwardedRef} {...props} />;
    };
  },
  {
    ssr: false,
  }
);

使用此代码您可以导入 ReactQuill，注册您的模块并传递您可以稍后使用的 ref，请参阅下面的详细信息。因此，使用此代码，您现在不需要任何状态。此外，您可以将自定义加载功能添加到动态 details here .

经过一天的搜索，我找到了解决方案。首先你导入动态的 ReactQuill。

import dynamic from 'react/dynamic'
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

或者如果你想像这样传递 ref

const ReactQuill = dynamic(
  async () => {
    const { default: RQ } = await import("react-quill");
    // eslint-disable-next-line react/display-name
    return ({ forwardedRef, ...props }) => <RQ ref={forwardedRef} {...props} />;
  },
  {
    ssr: false,
  }
);

And then you can use ref like this <ReactQuill ... forwardedRef={quillRef}/>

因此，在您在客户端导入 ReactQuill 后，您需要注册模块，我找到了这个解决方案 here它看起来很奇怪，我没有时间改进它，但它的工作。这里是代码。

  const loadQuill = async () => {
    return new Promise(async (resolve, reject) => {
      const Quill = await require("react-quill").Quill;
      const BlotFormatter = (await import("quill-blot-formatter")).default;
      resolve({ Quill, BlotFormatter });
    })
      .then(({ Quill, BlotFormatter }) => {
        Quill.register("modules/blotFormatter", BlotFormatter);
        return;
      })
      .then((value) => {
        setEnableEditor(true);
      });
  };

  useEffect(() => {
    loadQuill();
  }, []);

此代码将在客户端端注册模块上执行。同样如您所见，您需要声明状态 enableEditor。并且仅在 enableEditor 为 true 时渲染 ReactQuill

{enableEditor && <ReactQuill ... />}

看起来有点奇怪，所以也许我会稍后更新