element-ui vue-quill-editor 富文本编辑器 解决插入图片不采用base64 从服务器传图片在显示返回url

vue-quill-editor默认的图片插入方式,是直接将图片转成base64编码,这样的结果是整个富文本的html片段十分冗余。我们的服务器端接收的post的数据大小都是有限制的,这样的话导致提交失败,就算不提交失败,大量的数据存入数据库也不是好事。为了解决这个问题,我考虑了两个方案,换一个富文本编辑框框架,另一个是修改vue-quill-editor的框架代码。 
百度一番,果断开始尝试修改框架代码框架,因为换个富文本编辑框有太多不确定性,增加测试成本。

解决方式
如上图,我们点击图片,不是把图片的base64编码插入富文本框,而是将本地文件上传到我的文件上传地址(我这里默认提供post方式上传图片,并且返回图片地址),将图片以html方式插入在富文本框内。这样由原来的图片数据优化为了的html格式数据。

template部分

element-ui vue-quill-editor 富文本编辑器 解决插入图片不采用base64 从服务器传图片在显示返回url_第1张图片

vue data部分

element-ui vue-quill-editor 富文本编辑器 解决插入图片不采用base64 从服务器传图片在显示返回url_第2张图片

vue method部分:

element-ui vue-quill-editor 富文本编辑器 解决插入图片不采用base64 从服务器传图片在显示返回url_第3张图片

你可能感兴趣的:(element-ui vue-quill-editor 富文本编辑器 解决插入图片不采用base64 从服务器传图片在显示返回url)