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则完全不支持。

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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页