react 图片上传、图片粘贴

1. react 中引入 图片粘贴功能：

① package.json中引入

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

② 所在模块引入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);

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

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

let 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 = (content, delta, source, editor) => {
    // content 是真实的DOM节点
    // delta 记录了修改的对象，下篇文章详述
    // source 值为user或api
    // editor 文本框对象，可以调用函数获取content, delta值
};

⑥ 界面显示