React中使用富文本编辑器Quill，支持粘贴图片

最近项目中需要用到富文本编辑器，并且客户明确提出需要实现可以直接截图粘贴到文本框中。

由于我们的前端是用react写的，于是就去参考了知乎的实现，发现知乎的富文本框是可以直接贴图进去的，但由于看不到源码，只能浏览器调试看了一下，发现他就是一个可编辑的div，贴图进去后就是在div中增加一个img标签。

本来想自己实现一个，但由于刚刚接触前端3个月，实在是没那个能力，于是就搜索各种富文本框尝试，最后找到一个可以实现贴图的的富文本框Quill。

先放地址：

官网：https://quilljs.com/
github：https://github.com/quilljs/quill
react版：https://github.com/zenoamaro/react-quill
贴图组件：https://github.com/kensnyder/quill-image-drop-module

接下来简单说下在react中的使用方法：

package.json中引入

"quill-image-drop-module": "^1.0.3",
"react-quill": "^1.1.0",

使用quill

quill是支持模块扩展的，粘贴图片的功能就是通过quill-image-drop-module模块实现。

import ReactQuill, { Quill } from 'react-quill';
import { ImageDrop } from 'quill-image-drop-module';
import 'react-quill/dist/quill.snow.css';

// 在quiil中注册quill-image-drop-module
Quill.register('modules/imageDrop', ImageDrop);

quill的头部显示的功能按钮也是支持自定义配置的。这里在modules中声明imageDrop: true来开启贴图功能。

modules = {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
      ['link', 'image'],
      ['clean'],
    ],
    imageDrop: true,
  };

formats = [
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'image',
];

下面正式定义Quill

<ReactQuill
    theme="snow"
    modules={this.modules}
    formats={this.formats}
    onChange={this.onQuillChange}
    defaultValue={this.state.value}
    placeholder="Please Input"
/>

效果图

onChange函数

// 当修改文本框的内容时，会自动调用onQuillChange函数
onQuillChange = (content, delta, source, editor) => {
    // content 是真实的DOM节点
    // delta 记录了修改的对象，下篇文章详述
    // source 值为user或api
    // editor 文本框对象，可以调用函数获取content, delta值
};

详细可以看文档：https://github.com/zenoamaro/react-quill

存在的问题

存在浏览器兼容问题，目前完全支持火狐浏览器，谷歌浏览器只能在网页内截图粘贴，并且贴入后会在开头多一个空行。Safari则完全不支持。

这篇就先介绍到这，优化下篇再介绍，前端小白，第一次分享，请多多指教。