ReactQuill 组件在 NextJS 13.4.2 中无法显示
作者: gurbaaz27创建于 2023年5月26日更新于 2025年11月9日
import dynamic from "next/dynamic"
import { FieldErrors } from "react-hook-form"
const QuillNoSSRWrapper = dynamic(import('react-quill'), {
ssr: false,
loading: () =>
Loading ...
, }) import 'react-quill/dist/quill.snow.css' interface QuillEditorProps { id: string placeholder: string onChange: (arg0: string) => void value: string errors: FieldErrors } const modules = { toolbar: [ [{ header: '1' }, { header: '2' }, { header: '3' }, { font: [] }], [{ size: [] }], ['bold', 'italic', 'underline', 'strike', 'blockquote'], [ { list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }, ], ['link'], ['clean'], ], clipboard: { // toggle to add extra line breaks when pasting HTML: matchVisual: false, }, } const formats = [ 'header', 'bold', 'italic', 'underline', 'strike', 'blockquote', 'list', 'bullet', 'indent', 'link' ] const QuillEditor: React.FC = ({ id, placeholder, onChange, value, errors }) => { return (
onChange(value)}
modules={modules}
formats={formats}
/>
{errors[id] ? (
)
}
export default QuillEditor{errors[id]?.message?.toString()}
) : <></>}内容来源: zenoamaro/react-quill