菜鸟学习笔记之React-Quill富文本编辑器

最新推荐文章于 2025-11-10 00:49:08 发布

原创

最新推荐文章于 2025-11-10 00:49:08 发布 · 1w 阅读

5 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#富文本 #quill #编辑器 #react #antd

本文介绍了在React项目中使用React-Quill作为富文本编辑器的经验，强调了在配置toolbar和formats时需保持一致，并分享了如何处理图片上传，避免长base64字符串的方法。在图片上传过程中，通过自定义handler和组件外部的全局函数解决了Quill实例获取问题，同时也指出JavaScript中this指向的重要性。

React-Quill 是Antd推荐使用的富文本编辑器，此文记录一下最近在项目中使用它遇到的一些问题。

首先，大家在百度相关资料时，应当搜索React-Quill，而不是Quill。

github点这里：https://github.com/zenoamaro/react-quill

安装依赖这些就都不说了，只记录干货....

调用示例：

<ReactQuill
   theme="snow"
   value={content || ''}
   onChange={onChange}
   modules={modules}
   formats={formats}
/>

modules 是对编辑器功能的配置，此处是从组件的state中拿出来的，具体配置如下：

   modules: {
        toolbar: {
          container: [
            [{ header: [1, 2, false] }],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link', 'image'],
            ['clean'],
          ],
          handlers: {
            image() {
              imageHandler.call(this, props.action);
            },
          },
        },
      },