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
功能了。就想下面这样:
这样的配置其实就可以了,就可以实现图片的编辑大小,和排列方向了。
对应的 源码在这里。
写在最后
项目示例,你可以进来操作一波
项目源码
项目示例中,还自定义了一个工具栏中的功能,感兴趣可以了解一下。
---------------------------(正文完)------------------------------------
一个前端的学习交流群,想进来面基的,可以点击这个logo ➹,或者手动search群号:685486827,或者 qq 扫一扫
写在最后:约定优于配置-------软件开发的简约原则.
--------------------------------(完)--------------------------------------
我的:
个人网站: https://neveryu.github.io/neveryu/
Github: /Neveryu
新浪微博: /Neveryu
更多学习资源请关注我的新浪微博…