reactjs 如何在next js中导入{Quill}?或者如何使用Next.js在Quill编辑器中添加hr标记

ykejflvf  于 2023-02-08  发布在  React
关注(0)|答案(1)|浏览(234)

enter image description here
我的错误代码
你好,我想自定义羽毛笔编辑器一样分隔。
但是,当我使用{Quill}时,我出现了类似的错误。
我该怎么解决这个问题呢?
这是我代码

import { Quill } from 'react-quill';

const quill = Quill;

    const modules = useMemo(
        () => ({
            toolbar: {
                container:  /**/               
                handlers: {
                    hr: () => {
                        setHtmlContent((prev: string) => {
                            return prev + '<hr/>';
                        });
                    },
                },
            },
        }),

        []
    );

    const formats = [
        /**/
        'hr',
    ];

    return (           
            <ReactQuill
                theme="snow"
                modules={modules}
                formats={formats}
                value={htmlContent}
                onChange={(content, delta, source, editor) => {
                    setHtmlContent(editor.getHTML());
                }}
            />
    );
};
v8wbuo2f

v8wbuo2f1#

react-quill包使用了一些浏览器API,如document,这些API在服务器上不可用。当Next.js在服务器端呈现页面时会导致此错误。您可以通过仅使用dynamic导入在客户端上加载此包来修复此问题。
在这里,尝试按如下方式导入:

import dynamic from 'next/dynamic';

const Quill = dynamic(() => import('react-quill'), {
  // Set this to `false` so it is only loaded on the client.
  ssr: false,
  // You can also add an indicator while the component is loading.
  loading: () => <p>Loading ...</p>, 
})

希望这个有用。

相关问题