1

quill-blot-formatter登録した関数コンポーネントを作成し、モジュール リストにreact-quill追加しました。blotFormatter次に、このモジュールnext/dynamicを必要なページにインポートしました。

カスタム関数:

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 = [...];

ReactQuill次のようにデフォルトのエクスポートを呼び出していますreact-quill。

export default function QuillCustom({onChange}) {
    return (
        <ReactQuill
            modules={modules}
            formats={formats}
            theme="snow"
            onChange={onchange}
            readOnly={false}
        />
    );
}

Nextjs ページ コンポーネントでは、次のように呼び出しています。

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

return (
    <div>
        <QuillNoSSRWrapper
            className={styles.quillTextArea}
            onChange={handleTextChange}
        />
    </div>
)

ここでの問題は、ページが読み込まれた後、loading... 宣言された in の prop がconst QuillNoSSRWrapper画面に表示され、そこに永久に残ることです。クイル エディタは表示されません。

この行にコメントを付けてみQuill.register("modules/blotFormatter", BlotFormatter); ました: カスタム モジュールで、クイル エディターが表示されました。モジュールがblotFormatterQuill に登録されていませんか? じゃあどうやって登録するの？

4

1 に答える 1

0

すみません、悪い！ BlotFormatterデフォルトのインポートです。

import BlotFormatter from 'quill-blot-formatter';
于 2021-06-04T17:38:56.600 に答える