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

<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值
};

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

存在的问题

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

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

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

react中使用富文本编辑器，发布文章
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 富文本编辑器,在开发中是常用的,下面直接进入正题了: 1. ...
vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器一.安装及基本配置官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
在Django项目中使用富文本编辑器
2019独角兽企业重金招聘Python工程师标准>>> 1 开发要点现在网上有很多的富文本编辑器,包括Markdown.tinymce.UEditor.KindEditor.cke ...
vue中使用富文本编辑器wangEditor及踩坑
因为上传图片的问题使用过了各种富文本,最后发现还是这个比较好用.分享记录一下. 安装 npm install wangeditor --save 新建一个wangeditor.vue(组件),代码内容 ...
ThinkPHP框架中使用富文本编辑器后如何输出
htmlspecialchars_decode()用这个能解析里面的符号我们在利用ThinkPHP提交数据的时候,数据库里的数据是含各种html标签的,那么在输出时就可以直接输出嘛.但是,也许你的老 ...
react html编辑器,react项目中使用富文本编辑器
安装: cnpm install -D draft-js draftjs-to-html react-draft-wysiwyg // 用来指定商品详情的富文本编辑库 import React, { ...
在vue3中使用富文本编辑器WangEditor
yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --saveyarn add @wangeditor/editor-fo ...