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

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

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

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

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

template部分
script部分
在父组件中直接使用
  
import Editor from '../../components/Editor' //引用富文本Editor组件  
export default {
  name: 'addNewsList',
  data() {
    return {
      ruleForm:'',  //页面中数据
      isShow: false //富文本是否显示
    },
   components: {  // 组件的引用
       Editor
     },
    methods:{
    //接收子组件传递过来的值
    getChildValue(childValue) {
      this.ruleForm.content = childValue
    }

    }
  },

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

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » 富文本vue-quill-editor结合el-element实现自定义上传组件

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活