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

为了支持 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

• 文档：https://quilljs.com/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-upload

id=“img-upload”

action=“https://httpbin.org/post”

:multiple=“false”

:show-file-list=“false”

:on-success=“richUploadSuccess”

style=“height: 10px;”>

然后，我们来写这个 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 {

// 提示信息，需引入Message

this.$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() - 1

let numWrapper = document.querySelector(‘.quill-count’)

if(this.richCurrentLength > this.richMaxLength) {

numWrapper.style.color = ‘red’

} else {

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
3l-1715655327839)]

[外链图片转存中…(img-HFvh0H0r-1715655327839)]

[外链图片转存中…(img-tuVdrG2K-1715655327840)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！