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 需要根据你们的上传地址修改