vue项目中vue-quill-editor自定义图片上传

1、下载

npm install vue-quill-editor --save

2、在main.js中引入

// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 将富文本编辑器，注册为全局可用组件
Vue.use(VueQuillEditor)

3、使用

// 导入富文本编辑器样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

components: {
    quillEditor
}

<quill-editor
    class="ql-editor"
    v-model="enterpriseForm.content"
    ref="myQuillEditor"
    :options="editorOption"
    @change="onEditorChange($event)"
/>
<input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleUpload" />

data() {
	return {
		enterpriseForm: {
			content: ""
		},
		editorOption: {
        	modules: {
          		toolbar: [
            		['bold', 'italic', 'underline', 'strike'],
            		[{'size': ['small', false, 'large', 'huge']}],
            		[{'font': []}],
            		[{'align': []}],
            		[{'list': 'ordered'}, {'list': 'bullet'}],
            		[{'indent': '-1'}, {'indent': '+1'}],
            		[{'header': 1}, {'header': 2}], 
            		['image'],
            		[{'direction': 'rtl' }],    //文字编辑方向，从左到右还是从右到左
            		[{ 'color': [] }, { 'background': [] }] 
          		]
        	},
        	placeholder: '请输入内容...'
      	},
	}
}



mounted() {
    if (this.$refs.myQuillEditor) {
      this.$refs.myQuillEditor.quill.getModule("toolbar").addHandler("image", this.imgHandler);
    }
},
computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
},
methods: {
	imgHandler(state) {
      if (state) {
        this.$refs.fileBtn.click()
      }
    },
    handleUpload(e) {
      const files = Array.prototype.slice.call(e.target.files);
      if (!files) {
        return
      }
      let formdata = new FormData();
      formdata.append("file", files[0]);
      uploadFile(formdata)
      .then(res => {
        if (res.fileUrl) {
          let selection = this.$refs.myQuillEditor.quill.getSelection();
          //这里就是返回的图片地址，如果接口返回的不是可以访问的地址，要自己拼接
          let imgUrl = res.fileUrl;  
          //获取quill的光标，插入图片 
          this.$refs.myQuillEditor.quill.insertEmbed(selection != null ? selection.index : 0, 'image', imgUrl)                 
          //插入完成后，光标往后移动一位 
          this.$refs.myQuillEditor.quill.setSelection(selection.index + 1);
        }
      })
    },
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
    },
}