vue-quill-editor使用 上传图片

做人不可以太低下，因为父亲曾经把你举过头顶。

我的github: 李大玄
我的私人博客: 李大玄
我的npm开源库: 李大玄
我的简书: 李大玄
我的CSDN: 李大玄
我的掘金: 李大玄
哔哩哔哩: 李大玄

三个依赖

npm install vue-quill-editor --save 

npm install quill-image-extend-module --save-dev

npm install quill-image-resize-module --save

<template>
  <div class="quill-editor" v-loading="uploadLoading">
    <!-- <el-button @click="aaa">asdasd</el-button> -->
    <!-- <div class="w100 h200" v-html="content"></div> -->
    <quill-editor
      v-model="content"
      @blur="editorBlur($event)"
      @focus="editorFocus($event)"
      @ready="editorReady($event)"
      @change="editorChange($event)"
      :options="editorOption"
      ref="QuillEditor"
    ></quill-editor>
    <div class="upload-box">
      <ImageUpload :on-progress="uploadProgress" :action="action" :on-error="uploadError" name="files" :on-success="uploadSuccess">
        <div ref="ImageUpload" class="image-upload" slot="preview"></div>
      </ImageUpload>
    </div>
  </div>
</template>

<script>
//例如：import 《组件名称》 from '《组件路径》';
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
  ['blockquote', 'code-block'],

  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
  [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
  [{ direction: 'rtl' }], // text direction

  [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
  [{ font: [] }],
  [{ align: [] }],
  ['link', 'image', 'video'],
  ['clean'], // remove formatting button
];

import _ from 'lodash';
import processUtil from '@/env';
import { quillEditor, install } from 'vue-quill-editor';
import Quill from 'quill';

import { ImageUpload } from '@/components/upload';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.bubble.css';

import ImageResize from 'quill-image-resize-module';

Quill.register('modules/imageResize', ImageResize);

export default {
  name: 'QuillEditor', // Pascal命名
  components: {
    quillEditor,
    ImageUpload,
  },
  mixins: [],
  props: {
    quillContent: {
      type: String
    }
  },
  data() {
    return {
      action: processUtil.env.VUE_APP_API_upLoad_action,
      content: '',
      uploadLoading: false,
      editorOption: {
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: 'red',
              border: 'pink',
              color: 'yellow',
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar'],
          },
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  // alert('自定义图片');
                  document.querySelector('.image-upload').click();
                } else {
                  this.quill.format('image', false);
                }
              },
            },
          },
        },
      },
      quill: void 0,
    };
  },
  computed: {},
  watch: {
    quillContent: {
      handler(newVal) {
        this.content = newVal;
      },
      deep: true, // 深度
      immediate: true, // 立即执行
    }
  },
  filters: {},
  beforeCreate() {},
  created() {
    this.quill = void 0;
  },
  mounted() {},
  methods: {
    aaa() {
      let quill = this.$refs.QuillEditor.quill;
      const imgUrl = 'http://wecom-dev.oss-cn-beijing.aliyuncs.com/uploads/2021/6/4/066376a54e4249ea914e2e067bea0a6a.png';
      let length = quill.getSelection().index; // 光标位置
      quill.insertEmbed(length, 'image', imgUrl);
      quill.setSelection(length + 1); // 光标后移一位
    },
    editorBlur(quill) {
      // console.log('editor blur!', quill);
    },
    //获得焦点事件
    editorFocus(quill) {
      // console.log('editor focus!', quill);
    },
    // 准备富文本编辑器
    editorReady(quill) {
      this.quill = quill;
      // console.log('editor ready!', quill);
    },
    //内容改变事件
    editorChange(quill) {
      // console.log('editor change!', quill.html);
      // this.$emit('update:quillContent', quill.html);
      // this.content = html;
    },
    getContent() {
      return this.content;
    },

    // -------------------------------------------------------------------------------------
    uploadProgress() {
      this.uploadLoading = true;
    },
    uploadError() {
      this.uploadLoading = false;
      this.$message.error('上传失败');
    },
    // 上传成功
    uploadSuccess(index, file) {
      let quill = this.quill;
      this.uploadLoading = false;
      let res = file.response;
      // console.log('res.data', res.data); // http://wecom-dev.oss-cn-beijing.aliyuncs.com/uploads/2021/6/4/066376a54e4249ea914e2e067bea0a6a.png
      const imgUrl = _.first(res.data).url;
      if (res.code == processUtil.env.VUE_APP_API_CODE) {
        let length = quill.getSelection().index; //光标位置
        // 插入图片  图片地址
        quill.insertEmbed(length, 'image', imgUrl);
        // 调整光标到最后
        quill.setSelection(length + 1); //光标后移一位
      } else {
        this.$message.error('上传失败，请重试!');
      }
    },
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.quill-editor {
  width: 100%;
  .upload-box {
    // display: none;
    width: 0;
    height: 0;
  }
  /deep/ .ql-container.ql-snow {
    height: 300px;
  }
}
</style>