React中使用富文本编辑器Quill,支持粘贴图片
最近项目中需要用到富文本编辑器,并且客户明确提出需要实现可以直接截图粘贴到文本框中。
由于我们的前端是用react写的,于是就去参考了知乎的实现,发现知乎的富文本框是可以直接贴图进去的,但由于看不到源码,只能浏览器调试看了一下,发现他就是一个可编辑的div,贴图进去后就是在div中增加一个img标签。
本来想自己实现一个,但由于刚刚接触前端3个月,实在是没那个能力,于是就搜索各种富文本框尝试,最后找到一个可以实现贴图的的富文本框Quill。
先放地址:https://dwz.cn/ORcEz9fz
接下来简单说下在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值
};
到这就结束了。