vue中使用vue-quill-editor富文本编辑器，自定义toolbar，图片上传到七牛

一、npm 安装 vue-quill-editor 
二、在main.js中引入

import  VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

 三、将富文本编辑器提出作为组件，上传图片到七牛，在获取七牛返回的图片url插入到富文本中。

四、引入富文本组件，listEditQuery.rule是我这边编辑功能时需要的字段。

        这里需要获取富文本穿给父组件的值（@change-content="listenToChild"），通过此方法获取

 

import quillEditor from '@/components/Quilleditor'   //这里根据自己组件所放位置配置
import { ImportDetail } from '@/api/manage/***'

export default {
    data(){
        return{
            listEditQuery:{},
            flag:false  //在父组件定义一个flag，当数据获得的之后再进行子组件的渲染
        }
    }
    components: {
      quillEditor
    },
    methods: {
      getList(){
        this.listLoading = true
        ImportDetail(this.listQuery).then(response => {
          this.listLoading = false
          this.listEditQuery = response.data 
          this.flag = true
 
        }).catch(err => {
          console.log(err, '没有数据1')
          this.tableData = []
          this.listLoading = false
        })
        
      },  
      //富文本 赛事章程
      listenToChild(val){
        this.listEditQuery .rule = val
        // console.log(this.listEditQuery.rule)
      }
    },

    mounted () {
      this.getList()
    }
}