react18中使用react-quill富文本编辑器

jsmeng626

已于 2023-04-10 18:57:25 修改

阅读量2k

点赞数 2

分类专栏： react 文章标签： javascript react.js

于 2023-03-14 18:06:07 首次发布

本文链接：https://blog.csdn.net/jsmeng626/article/details/129535610

版权

文章介绍了如何在React应用中集成并配置React-Quill编辑器，包括通过npm安装，引入样式，定义编辑器配置以及在组件中使用的方法。主要步骤包括安装库，导入样式，设置工具栏选项，并在React组件中定义value和onChange属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：安装

npm i react-quill

第二步：引入

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

第三步：定义react-quill的配置对象，我只做了简单配置，详细配置可以去照着文档配

const quillOption = {
    toolbar: {
      container: [
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ align: [] }],
        [{ color: [] }, { background: [] }],
        ['