4.富文本编辑器图片使用方法11k大小logo

　　4.富文本编辑器图片使用方法11k大小logo

　　在文章的发布功能中，我们希望发布一整条文章，有标题、小节、写文档等粗体效果，而不仅仅是一段文字。这时候就需要用到富文本编辑器了。富文本编辑器的版本很多，风格不同，使用方法也不同。

　　本文我们下载并使用vue相关的富文本编辑器：npm中的vue2-editor。

　　1.安装 vue2-editor

　　网址：

　　

　　我们在管理端使用这个包：

　　cd admin

　　npm install vue2-editor

　　

　　安装完成，开始使用：

　　2.在网站中找到vue2Editor的引入方法，引用并使用

　　

　　进入ArticleSet.vue组件文件：

　　

　　复制上面的标题输入框，将输入框改成vue-editor组件：

　　

　　此时页面上已经出现了富文本编辑器，大家可以自己测试一下：

　　

　　3.修改界面和数据模型上传富文本编辑器内容

　　富文本编辑器的原理是将我们输入的文本和样式变成HTML，并在文本中添加HTML标签：

　　

　　于是在模型中新建一个字符串的内容类型来完成上传。

　　

　　测试：

　　

　　

　　

　　没问题。但是当我们查看元素时，会发现有些效果是使用vue2-editor类包中的类名实现的。现在admin端引入了class包，以后web端也需要用到vue2-editor。以达到前端展示的效果。

　　

　　4.富文本编辑器图片介绍

　　(1）上传自己图片的弊端

　　当然，富文本编辑器可以上传图片，但是上传的图片是直接以base64编码的文本形式发送到后端接口的。我们还没有修改界面，但你也可以测试一下。我还花了五分钟重做一个 11k 的小 logo 进行测试：

　　

　　上传成功后，从列表中进入页面，可以看到接口文件上传的大小。普通界面上传只需要不到1k，但是这次带图片的上传大小已经达到了11k，也就是说图片的大小会影响界面的上传速度。如果我们上传多张大小不超过十兆的图片，很可能是对接口传输值的负载过大，导致崩溃：

　　

　　所以，我们需要修改图片的上传。

　　(2）修改图片上传方法

　　回到原来的vue2-editor页面，找到一个自定义上传的例子：

　　

　　修改ArticleSet.vue：

　　

　　将示例中的方法复制到我们的方法中，并进行以下修改：

　　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文件夹中找到图片。

　　

　　接口调用成功，文件没问题，找到文件名：bbcf3dafdce988e88987ae84d5e5c805，在uploads文件夹中查找：

　　

　　你可以找到它，没问题。

　　再看编辑器中生成图片的代码：

　　

　　是我们后端的图片路由地址，没问题。保存测试：

　　

　　再进去，没问题，富文本编辑器的图片上传也成功了。