[英]Quill-blot-formatter is not registering with react-quill on import through next/dynamic and keeps showing loading
I made a function component where I have registered quill-blot-formatter
with react-quill
and added the blotFormatter
in the modules list.我制作了一个 function 组件,我在其中使用
react-quill
quill 注册了 quill quill-blot-formatter
并在模块列表中添加了blotFormatter
。 Then I imported this module with next/dynamic
on the page I want.然后我在我想要的页面上用
next/dynamic
导入了这个模块。
The custom function:定制 function:
import ReactQuill, { Quill } from 'react-quill';
import { BlotFormatter } from 'quill-blot-formatter';
import 'react-quill/dist/quill.snow.css'
Quill.register("modules/blotFormatter", BlotFormatter);
const modules = {
blotFormatter: {
overlay: {
style: { border: '2px solid red',}
}},
toolbar: [...],
}
const formats = [...];
I am calling the default ReactQuill
export from react-quill
like this:我从
react-quill
quill 调用默认的ReactQuill
导出,如下所示:
export default function QuillCustom({onChange}) {
return (
<ReactQuill
modules={modules}
formats={formats}
theme="snow"
onChange={onchange}
readOnly={false}
/>
);
}
And on a Nextjs page component I'm calling it like this:在 Nextjs 页面组件上,我这样称呼它:
const QuillNoSSRWrapper = dynamic(() => import('../Components/quillComponent'), {
ssr: false,
loading: () => <p>Loading...</p>,
})
return (
<div>
<QuillNoSSRWrapper
className={styles.quillTextArea}
onChange={handleTextChange}
/>
</div>
)
Now, the issue is that, after the page loads, the loading...
prop of declared in const QuillNoSSRWrapper
shows on the screen and stays there forever.现在,问题是,在页面加载后,在
const QuillNoSSRWrapper
中声明的loading...
属性会显示在屏幕上并永远留在那里。 The quill editor doesn't appear.羽毛笔编辑器不出现。
I tried commenting this line: Quill.register("modules/blotFormatter", BlotFormatter);
我试着评论这一行:
Quill.register("modules/blotFormatter", BlotFormatter);
on the custom module and then the quill editor appeared.在自定义模块上,然后出现羽毛笔编辑器。 Is the
blotFormatter
module not registering with Quill? blotFormatter
模块是否未向 Quill 注册? How do I register that then?那我怎么注册呢?
Sorry, my bad!对不起这是我的错!
BlotFormatter
is the default import. BlotFormatter
是默认导入。
import BlotFormatter from 'quill-blot-formatter';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.