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

最新推荐文章于 2025-03-05 20:27:46 发布

天府第5街①号切图仔

最新推荐文章于 2025-03-05 20:27:46 发布

阅读量9.9k

点赞数

文章标签：富文本 quill 编辑器 react antd

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

本文链接：https://blog.youkuaiyun.com/hemyWeb/article/details/95181755

版权

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

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

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'],