富文本vue-quill-editor结合el-element实现自定义上传组件

1.痛点:在使用富文本编辑器时,经常用到上传图片,可是编辑器默认是将图片转成basE64存储的,这会导致上传时间过长以及前端小程序获取富文本内容时因为文件base64太大显示不了

2.解决:所以使用富文本编辑器进行自定义上传,先将图片上传到后端服务器,然后获取服务器返给我们的图片URL,然后再将此URL插入到富文本中即可.

3.组件化:项目中经常使用,所以将此功能写成一个组件 Editor.vue以来复用

以下为Editor.vue组件全部代码:

template部分

script部分

在父组件中直接使用

注意:data里面定义一个变量isshow,由于接口异步加载的问题,子组件拿不到父组件传过来的数据,所以加一个开关来判断,初始化的时候给一个false,数据加载赋值的时候再给他赋值为true即可.
参考文章-富文本编辑vue-qUIll-editor自定义图片、文件上传

未经允许不得转载:一点博客-青梅煮码-共享博客 » 富文本vue-quill-editor结合el-element实现自定义上传组件
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏