时间戳

首页 > 解决方案 > Nextjs：如何注册 quill-blot-formatter 以仅在客户端渲染上动态导入 react-quill？

javascript - Nextjs：如何注册 quill-blot-formatter 以仅在客户端渲染上动态导入 react-quill？

问题描述

我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 示例之后，我什至没有ReactQuill像包中的默认导出那样导入 react-quill。

然后我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呢？

标签： javascriptreactjsnext.jsquillreact-quill

解决方案

推荐阅读