Nextjs:如何将quill格式化程序注册为只在客户端呈现的动态导入的react？

Question

我只使用react-quill在客户端动态导入ssr: false。我的功能组件工作得很好，我想将quill-blot-formatter包添加到我的quill组件的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的Next.js示例，我甚至不会像包中默认的导出那样将react导入为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子组件做得很好，但是，如何在它的formats中使用quill-blot-formatter？

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，注册您的模块，并传递您稍后可以使用的参考资料，请参阅下面的详细信息。因此，使用此代码，您现在不需要任何状态。此外，还可以向动态这里的细节添加自定义加载函数。

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

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

或者如果你想像这样通过裁判

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,
  }
);

然后你就可以像这个<ReactQuill ... forwardedRef={quillRef}/>一样使用ref

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

  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。并仅当ReactQuill为真时才呈现enableEditor

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

看上去有点模糊，也许我稍后会更新它。