文章的发布功能中，我们希望像写文档一样发布一整篇带标题、分段、加粗等效果的文章，而不是单纯的一段文本，这时就需要用到富文本编辑器。富文本编辑器有很多版本，他们样式不同，使用方法不同。
本篇这里我们在npm下载并使用vue相关的富文本编辑器：vue2-editor。
1.安装vue2-editor
网址：https://www.npmjs.com/package/vue2-editor
我们在admin端使用该包：
cd adminnpm 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文件夹找一下：
可以找到，没问题。
再看一下编辑器内生成图片的代码：
是我们后台的图片路由地址，没问题。保存测试：
再进去，没问题，富文本编辑器的图片上传也成功了。
