vue-quill-editor element上传图片

要在vue-quill-editor中上传图片，可以使用element-ui的el-upload组件，并将其嵌入到vue-quill-editor中。以下是一个简单的示例：

首先，在组件的data中定义一个变量，用于保存上传后的图片url：

data() {
  return {
    imageUrl: ''
  }
}

然后，在vue-quill-editor中添加一个toolbar选项，用于触发上传图片的操作。在这个选项中，我们可以使用一个自定义的按钮，将el-upload组件嵌入到其中：

<template>
  <div>
    <vue-quill-editor v-model="content" :options="editorOption">
      <div slot="toolbar">
        <span class="ql-formats">
          <button class="ql-image" @click="uploadImage">Upload Image</button>
        </span>
      </div>
    </vue-quill-editor>
    <el-dialog :visible.sync="dialogVisible">
      <el-upload
        class="upload-demo"
        action="//jsonplaceholder.typicode.com/posts/"
        :on-success="handleSuccess"
        :show-file-list="false">
        <el-button slot="trigger" size="small" type="primary">Click to Upload</el-button>
      </el-upload>
    </el-dialog>
  </div>
</template>

在这个示例中，我们使用了一个el-dialog组件来显示el-upload组件。在点击上传图片按钮时，会打开这个对话框。当上传成功后，会调用handleSuccess方法来获取上传后的图片url，并将其保存到imageUrl变量中。

最后，我们需要在组件的methods中实现uploadImage和handleSuccess方法：

methods: {
  // 打开上传图片的对话框
  uploadImage() {
    this.dialogVisible = true
  },
  // 上传成功后将图片url保存到imageUrl变量中
  handleSuccess(response, file, fileList) {
    this.imageUrl = URL.createObjectURL(file.raw)
    this.dialogVisible = false
    // 将上传的图片插入到编辑器中
    const range = this.quill.getSelection()
    this.quill.insertEmbed(range.index, 'image', this.imageUrl)
  }
}

在这个示例中，我们使用了URL.createObjectURL方法来获取上传后的图片url。然后，我们将这个url插入到quill编辑器中，以便在编辑器中显示上传后的图片。