Nextjs 集成富文本编辑器react-quill

一、组件代码

二、参考文档

由于Next与react有些差别，直接调用组件会报无法找到文档的错误，于是我们只有考虑动态导入了解决问题。因为富文本编辑器一般作用与form页面对SEO意义不大，所以这里可以考虑暂时关闭SSR。

一、组件代码

/**
 * @author Dragon Wu
 * @since 2024/6/11 14:36
 */
import React, {useEffect, useState} from 'react';
import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';

const ReactQuill = dynamic(() => import('react-quill'), {ssr: false});

const TenderEditor: React.FC<{defaultValue:string, onChange:Function}> = React.memo(({defaultValue, onChange}) => {

    const [editorValue, setEditorValue] = useState(defaultValue);

    const handleChange = (content) => {
        setEditorValue(content);
        onChange(content);
    };

    useEffect(() => {
        handleChange(defaultValue)
    }, [defaultValue]);

    return (<>
        <ReactQuill
            modules={{
                toolbar: [
                    ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
                    ["blockquote", "code-block"],                    // 引用  代码块
                    [{list: "ordered"}, {list: "bullet"}],       // 有序、无序列表
                    [{indent: "-1"}, {indent: "+1"}],            // 缩进
                    [{size: ["small", false, "large", "huge"]}],   // 字体大小
                    [{header: [1, 2, 3, 4, 5, 6, false]}],         // 标题
                    [{color: []}, {background: []}],             // 字体颜色、字体背景颜色
                    [{align: []}],                                 // 对齐方式
                    ["clean"],                                       // 清除文本格式
                    ["link", "image", "video"]                       // 链接、图片、视频
                ],
            }}
            value={editorValue}
            onChange={handleChange}
            theme="snow"
            placeholder="请输入内容"
        />
    </>)
});

TenderEditor.displayName = "TenderEditor";

export default TenderEditor;

正常渲染，没有再报错：