React 实现富文本（使用篇&Next.js）

项目中全局下载：

复制代码

npm uninstall react-quill

组件中引入：

复制代码

import ReactQuill from 'react-quill';
import 'react-quill-new/dist/quill.snow.css';

组件中使用：

复制代码

<Form.Item
    name="content"
    label="版本内容"
    trigger="onChange"
    validateTrigger="onBlur"
    rules={[{ required: true, message: '请输入内容' }]}
>
    <ReactQuill theme="snow" />
</Form.Item>

！！！在React 18版本下的使用应该是没有问题的！！！

动态导入（推荐用于 Next.js / SSR 项目）

因为我的项目中的React版本是 18以上，使用的是 Next.js 框架，所以直接这么使用导致错误：

复制代码

Error: react_dom_1.default.findDOMNode is not a function

这个错误通常是因为 react-quill 内部使用了 ReactDOM.findDOMNode，而在 React 18 的**并发模式（Concurrent Mode）**或 **严格模式（Strict Mode）**下，这个 API 已经被废弃或限制使用，尤其是在 Next.js 或 Vite 环境中。

版本：

复制代码

"react": "^18.2.0"
"react-quill": "^2.0.0",

使用 react-quill: ^2.0.0，在这个库在 React 18 环境下（特别是开启了 Strict Mode 严格模式时）存在已知的兼容性问题。

Next.js 或类似的 SSR 框架，react-quill 因为依赖 window 对象，必须在客户端加载。使用 next/dynamic 可以有效避开 SSR 期间的报错以及 DOM 节点的引用冲突。

替代方案：

复制代码

npm install react-quill-new

组件动态导入Dynamic Import：

复制代码

// 1. 引入 dynamic
import dynamic from 'next/dynamic';
// 2. 使用 dynamic 导入 ReactQuill，并关闭 ssr
const ReactQuill = dynamic(() => import('react-quill-new'), { 
  ssr: false,
  loading: () => <div style={{ height: '300px', border: '1px solid #ccc' }}>加载编辑器中...</div>
});

// 注意：CSS 的导入依然保持正常
import 'react-quill-new/dist/quill.snow.css';

组件使用暂时不变：

复制代码

<Form.Item
    name="content"
    label="版本内容"
    trigger="onChange"
    validateTrigger="onBlur"
    rules={[{ required: true, message: '请输入内容' }]}
>
    <ReactQuill theme="snow" />
</Form.Item>

如需设置modules（可选）：

复制代码

// 不要写在组件外面，因为外面会在服务端执行
// 使用 useMemo 确保只在客户端初始化一次
const modules = useMemo(() => ({
        toolbar: [
            [{ 'header': [1, 2, false] }],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
            ['link', 'image'],
            ['clean']
        ]
        // 如果有自定义 handlers，确保不引用服务端不存在的 window
    }), []);

<ReactQuill modules={modules} ... />;

最终效果：