当前位置：首页 > news >正文

新版 React19使用 react-quill

news 来源：原创 2025/5/20 6:06:47

检查 Quill 的版本：

确保你使用的 Quill 版本与 React 19 兼容。有时候，库的更新或补丁版本会解决与新版本 React 的兼容性问题。可以尝试查看 Quill 的 GitHub 仓库或 npm 页面上的 release notes。

npm install quill@latest

如果你需要更复杂的集成或者额外的功能，可以考虑使用 react-quill 这个社区维护的库，它为 Quill 提供了一个更 React 友好的封装。安装和使用方法如下：

npm install react-quill

import React from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // 引入主题样式
 
function App() {
  return (
    <div>
      <ReactQuill theme="snow" />
    </div>
  );
}
 
export default App;

新版 React19版本

npm install react-quill-new --save

参考地址： react-quill-new - npm

import React, { useState } from 'react';
import ReactQuill from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';

function MyComponent() {
  const [value, setValue] = useState('');

  return <ReactQuill theme="snow" value={value} onChange={setValue} />;
}

基本用法

在你的 React 组件中，你可以这样使用 React Quill：

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // 引入样式文件
 
const EditorComponent = () => {
  const [value, setValue] = useState('');
 
  return (
    <ReactQuill
      theme="snow"
      value={value}
      onChange={setValue}
    />
  );
};
 
export default EditorComponent;

配置模块和工具栏

你可以通过 modules 和 formats 属性来自定义 Quill 的工具栏和功能。例如：

// 配置 Quill 工具栏，添加图片上传按钮
const modules = {
  toolbar: {
    container: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
      ['link', 'image'],
      ['clean']
    ],
  },
};
 // 配置 Quill 格式
const formats = [
  'header', 'bold', 'italic', 'underline', 'strike', 'blockquote', 
  'list', 'bullet', 'indent', 'link', 'image'
];
 
<ReactQuill 
  theme="snow" 
  value={value} 
  onChange={setValue} 
  modules={modules} 
  formats={formats} 
/>;

实例：编辑页面

import React, { useState } from'react';
// import ReactQuill from 'react-quill';
// import 'react-quill/dist/quill.snow.css';
import ReactQuill from 'react-quill-new';
import 'react-quill-new/dist/quill.snow.css';

import { Form, Input, DatePicker, Button } from 'antd'; // 导入 Ant Design 的 Form, Input, DatePicker 和 Button 组件
import 'antd/dist/antd.css';
// 配置 Quill 工具栏，添加图片上传按钮
const modules = {
  toolbar: [
    [{ 'header': [1, 2, false] }],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
    ['link', 'image'],
    ['clean']
  ]
};

// 配置 Quill 格式
const formats = [
  'header', 'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent', 'link', 'image'
];

export default function Create() {
  const [title, setTitle] = useState('');
  const [author, setAuthor] = useState('');
  const [date, setDate] = useState(new Date().toISOString().split('T')[0]);
  const [content, setContent] = useState('');

  const handleSubmit = () => {
    // 这里可以添加提交表单数据的逻辑，例如发送到后端 API
    console.log('标题:', title);
    console.log('作者:', author);
    console.log('时间:', date);
    console.log('内容:', content);
  };

  return (
    <div style={{ width: '80%', margin: '0 auto' }}>
      <h1>编辑文章</h1>
      <Form layout="vertical" onFinish={handleSubmit}>
        <Form.Item label="文章标题:" name="title">
          <Input
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </Form.Item>
        <Form.Item label="作者:" name="author">
          <Input
            value={author}
            onChange={(e) => setAuthor(e.target.value)}
          />
        </Form.Item>
        <Form.Item label="时间:" name="date">
          <DatePicker
            value={new Date(date)}
            onChange={(date, dateString) => setDate(dateString)}
            format="YYYY-MM-DD"
          />
        </Form.Item>
        <Form.Item label="内容:" name="content">
          <ReactQuill
            value={content}
            onChange={setContent}
            modules={modules}
            formats={formats}
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

高级用法和 API 文档

对于更高级的用法，如集成到表单中、处理粘贴事件、自定义样式等，你可以查看 GitHub 仓库中的 Issues 和 Pull Requests，或者在 Stack Overflow 等社区中搜索相关的讨论和示例。React Quill 的 GitHub Issues 也是一个很好的资源，你可以在那里找到用户报告的问题和开发者提供的解决方案。