富文本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自定义图片、文件上传