vue中使用vue-quill-editor及上传图片到自己服务器

第一步，下载依赖

cnpm install vue-quill-editor --save

第二步，再main.js里引入组件（我这里是全局注册)

// 富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor)

第三步，如果要上传图片到自己服务器的话如下

cnpm install vue-quill-editor-upload --save

接下来再组件中使用

//js布冯
import {quillRedefine} from 'vue-quill-editor-upload'
data(){
  return{
      editorOption: {
            modules:{
                toolbar:[
                    ['image'],
                    [{ 'color': [] }, { 'background': [] }]
                ]
            }
        },
    }
},
components: {quillRedefine},
  computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
    }
  },
methods: {
      onEditorReady(editor) { // 准备编辑器
        },
    onEditorBlur(){}, // 失去焦点事件
    onEditorFocus(){}, // 获得焦点事件
    onEditorChange(event){
        console.log(event.html)
        this.htmls = event.html
    }, // 内容改变事件
 },
created: function() {
    let that = this;
    that.upLoadUrl=upLoadUrl+'/?width=300';
    that.editorOption = quillRedefine(
        {
          // 图片上传的设置
          uploadConfig: {
            action: that.upLoadUrl,  // 必填参数 图片上传地址
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (respnse) => {
                console.log(respnse)
                var path = respnse.path//这里return你的图片地址即可
              return path
            },
            name: 'img'  // 图片上传参数名
          },
          toolOptions: [
              [{'color': []}, {'background': []}],
              [ 'image']
          ]
        }
      )
  }

temple里的代码是

 <quill-editor
        v-model="dataInfo.description"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
</quill-editor>

这样就可以正常操作了，注：上方的 upLoadUrl 需要根据你们的上传地址修改