vue的富文本编辑器(vue2-editor)
文章的发布功能中,我们希望像写文档一样发布一整篇带标题、分段、加粗等效果的文章,而不是单纯的一段文本,这时就需要用到富文本编辑器。富文本编辑器有很多版本,他们样式不同,使用方法不同。
本篇这里我们在npm下载并使用vue相关的富文本编辑器:vue2-editor。
1.安装vue2-editor
网址:https://www.npmjs.com/package/vue2-editor
我们在admin端使用该包:
cd admin
npm install vue2-editor
安装完成,开始使用:
2.在网站中找到vue2Editor的引入方式,进行引用并使用
进入ArticleSet.vue组件文件:
复制上方标题输入框,把input输入框改为vue-editor组件:
此时,页面已经出现富文本编辑器,大家自行测试:
3.修改接口和数据模型上传富文本编辑器内容
富文本编辑器的原理就是将我们输入的文本和样式变成了HTML,在文本上加了HTML标签:
所以模型中新建一个类型为string的内容content就可以完成上传了。
测试:
没问题。但是我们在检查元素的时候会发现,部分效果的实现是使用了vue2-editor类包中的类名实现的,现在类包在admin端引入,以后在web端使用时我们也需要将vue2-editor引入,才能实现前台展现的效果。
4.富文本编辑器图片的引入
(1)自带图片上传的缺点
富文本编辑器当然是可以上传图片的,但是上传的图片是以base64编码直接当作文本一起传到后台接口的,现在我们还没有修改接口,但是也可以测试一下。我还专门花了五分钟重做了一个11k大小的小logo进行测试:
上传成功后,从列表进入页面,可以看到接口文件上传的大小。普通的接口上传只需要不到1k,但是本次带图上传的大小达到了11k,也就是说图片的大小会影响接口上传速度,如果我们上传多张高达十几兆大小的图片,很可能对接口传值的负载过大,引起崩溃:
所以,我们要将图片的上传修改一下。
(2)修改图片上传方式
回到最初vue2-editor页面,找到自定义上传示例:
修改ArticleSet.vue:
将示例中的方法复制到我们的方法methods中,进行一下修改:
async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
// 引入包内自带的formdata
const formData = new FormData();
// 将前端传入formdata中数据名为file的数据追加到formdata,与上篇文章的图片上传相同
formData.append("file", file);
// 使用我们上篇文章定义好的图片上传接口,将formdata数据传到后台,并接收返回的数据到res
const res = await this.$http.post('upload', formData)
// 找到返回数据中的图片链接
let url = res.data.url;
// 用vue-editor包自带的插入方法:在光标所在位置,插入一张图片,图片的地址是url
Editor.insertEmbed(cursorLocation, "image", url);
// 刷新(重置)编辑器
resetUploader();
},
测试一下,如果没问题,结果应该与上篇文章的图片上传效果一样,图片显示后直接在uploads文件夹找到图片。
接口调用成功,file没问题,找到filename:bbcf3dafdce988e88987ae84d5e5c805,去uploads文件夹找一下:
可以找到,没问题。
再看一下编辑器内生成图片的代码:
是我们后台的图片路由地址,没问题。保存测试:
再进去,没问题,富文本编辑器的图片上传也成功了。