600字范文 > vue 富文本 quill 编辑器实现图片上传到服务器以及实时字数统计

vue 富文本 quill 编辑器实现图片上传到服务器以及实时字数统计

时间：2021-05-28 03:07:00

vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计

写在前面vue 富文本quill / vue-quill-editor如何使用图片上传到服务器实时字数统计图片编辑写在最后

写在前面

这有一篇文章大家先看一下，以及思考一下。为什么都说富文本编辑器是天坑？

然后，我这边有一个基于 Vue 使用quill完成的富文本功能的实例：vue-cms-富文本，大家可以看一下是否满足你的需求。然后，对应的源码在这里。

然后，话不多说，列几个现在常用的富文本插件/组件：

Summernote 不推荐simditor 不推荐UEditor （ps：功能强大，全面，老牌；已经与停更，样式有点“老旧”）不推荐medium-editor （ps：只有行内的编辑，感觉不太行啊；但是如果正好有这种需求，我觉得挺好）wangEditor （ps：基本功能足够，样式也还行；但是提供的api以及配置和丰富性上不是很多）CKEditor （ps：很不错的，推荐）Froala （ps：也很不错，支持付费版）TinyMCEQuill （ps：不错的，推荐，本文将介绍这个的使用，以及几个自定义功能的实现）vue-quill-editor （ps：基于Quill封装的；其实我不是很推荐这个。。。直接用Quill就完事了）

vue 富文本

为了支持 webpack 以及模块化，优先选择支持UMD模式的，以及提供了npm方式的富文本工具；

本文介绍Quill的使用姿势，以及相关注意事项。

另外再实现几个自定义的功能：

1、上传图片到服务器

2、图片编辑

3、实时字数统计

quill / vue-quill-editor

不是很推荐vue-quill-editor，建议直接用quill就完事了，而且quill的文档和api也都是很直接清晰的，直接用的话，更灵活

关于quill的使用还是有一些需要注意的地方，下面我们来看一下：

如何使用

安装

npm i quill -S

使用参考这里

1、引入

import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import Quill from 'quill'

2、初始化

定义一个<div id="quill-editor"></div>的元素

然后，在mounted中调用initQuill方法，完成初始化

至于编辑的宽高，你可以在css中，自己去设置

// 这是 methods 中的 initQuill 方法// 你可以在 mounted 中调用它// 这样就完成了 quill 的初始化initQuill() {const quill = new Quill('#quill-editor', {// 编辑器配置选项theme: 'snow',placeholder: 'Compose an epic...',debug: 'error',modules: {toolbar: {// 工具栏的配置项container: this.$options.toolbarOptions}}})this.quill = quill/*** 监听富文本变化* editor-change 包括 text-change、selection-change* 你也可以分别监听 text-change 和 selection-change* 文档：/docs/api/#text-change*/quill.on('editor-change', this.onEditorChange)}

图片上传到服务器

quill默认的图片上传功能是图片转成bse64编码字符串，纯前端玩玩还行；

项目中，这样是不太合适的，而且几十兆的那种大图片，转成base64字符串是很长很长的一大串。

1、初始化覆盖默认的上传功能

给image自定义一个上传的方法

modules: {toolbar: {container: this.$options.toolbarOptions,handlers: {// 自定义功能'image': this.$options.imageFunction}},...}

2、页面中加入了Element-UI的上传功能，然后使用css让上传按钮不显示；所以，点击富文本中的图片上传，就点击这个上传按钮

// 自定义富文本的图片上传imageFunction(val) {if(val) {document.querySelector('#img-upload input').click()} else {this.quill.format('image', false)}}

3、上传成功后，就把图片插入到富文本框中

所以，这里需要定义Element-UI的上传组件的on-success方法richUploadSuccess。

<el-uploadid="img-upload"action="/post":multiple="false":show-file-list="false":on-success="richUploadSuccess"style="height: 10px;"></el-upload>

然后，我们来写这个richUploadSuccess方法

// 富文本中的图片上传richUploadSuccess(response, file, fileList) {/*** 如果上传成功* ps：不同的上传接口，判断是否成功的标志也不一样，需要看后端的返回* 通常情况下，应该有返回上传的结果状态（是否上传成功）* 以及，图片上传成功后的路径* 将路径赋值给 imgUrl*/if (response.files.file){let imgUrl = response.files.file// 获取光标所在位置let length = this.quill.getSelection().index// 插入图片，res为服务器返回的图片链接地址this.quill.insertEmbed(length, 'image', imgUrl)// 调整光标到最后this.quill.setSelection(length + 1)} else {// 提示信息，需引入Messagethis.$message.error('图片插入失败')}}

对应的源码在这里。

实时字数统计

根据quill提供的api，getLength方法可以用来实现实时字数统计

// 初始化时，已经绑定了 quill 的 editor-change 方法// quill.on('editor-change', this.onEditorChange)，实时监听富文本内容即可。// 所以，quill 的内容变动，都会调用这个方法onEditorChange(eventName, ...args) {if (eventName === 'text-change') {// args[0] will be delta// 获取富文本内容this.content = document.querySelector('#quill-editor').children[0].innerHTML} else if (eventName === 'selection-change') {// args[0] will be old range}}

拿到content以后，使用 Vue 的watch来监听这个content。

watch: {content() {// 富文本内容长度this.richCurrentLength = this.quill.getLength() - 1let numWrapper = document.querySelector('.quill-count')if(this.richCurrentLength > this.richMaxLength) {numWrapper.style.color = 'red'} else {numWrapper.style.color = '#666'}}}

对应的源码在这里。

图片编辑

quill默认上传后的图片，不能编辑，不能设置排列方向，为了实现这个功能，我们使用了一个工具包：quill-image-resize-module，安装并且引入它。npm i quill-image-resize-module -S

然后：

import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import Quill from 'quill'import ImageResize from 'quill-image-resize-module'Quill.register('modules/imageResize', ImageResize)

需要注意的是：这个Quill变量需要做一个全局的处理，我们可以在webpack中来做这个操作。（不做这一步，会报错。）

在webpack.base.conf.js中，加上：

源码在这里，文件开头记得引入webpack哦。

quill-image-resize-module引入以后，webpack.base.conf.js也修改完以后，那么接下来，我们就可以来配置ImageResize功能了。就想下面这样：

这样的配置其实就可以了，就可以实现图片的编辑大小，和排列方向了。

对应的源码在这里。