最近项目中需要用到富文本编辑器，并且客户明确提出需要实现可以直接截图粘贴到文本框中。
由于我们的前端是用react写的，于是就去参考了知乎的实现，发现知乎的富文本框是可以直接贴图进去的，但由于看不到源码，只能浏览器调试看了一下，发现他就是一个可编辑的div，贴图进去后就是在div中增加一个img标签。
本来想自己实现一个，但由于刚刚接触前端3个月，实在是没那个能力，于是就搜索各种富文本框尝试，最后找到一个可以实现贴图的的富文本框Quill。
先放地址：
官网：/github：/quilljs/quillreact版：/zenoamaro/react-quill贴图组件：/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-moduleQuill.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
<ReactQuilltheme="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值};
详细可以看文档：/zenoamaro/react-quill
存在的问题
存在浏览器兼容问题，目前完全支持火狐浏览器，谷歌浏览器只能在网页内截图粘贴，并且贴入后会在开头多一个空行。Safari则完全不支持。
这篇就先介绍到这，优化下篇再介绍，前端小白，第一次分享，请多多指教。
