帮我封装一个vue2富文本编辑器组件, 可以拖拽修改图片大小,自定义上传地址

以下是一个简单的Vue2富文本编辑器组件，支持拖拽调整图片大小和自定义上传地址：

<template>
  <div>
    <div ref="editor" contenteditable="true" @input="handleInput"></div>
    <input type="file" ref="fileInput" style="display:none" @change="handleFileChange">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    },
    uploadUrl: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.$refs.editor.innerHTML = this.value
    this.$refs.editor.addEventListener('drop', this.handleDrop)
    this.$refs.editor.addEventListener('paste', this.handlePaste)
  },
  beforeDestroy() {
    this.$refs.editor.removeEventListener('drop', this.handleDrop)
    this.$refs.editor.removeEventListener('paste', this.handlePaste)
  },
  methods: {
    handleInput() {
      this.$emit('input', this.$refs.editor.innerHTML)
    },
    handleDrop(event) {
      event.preventDefault()
      if (event.dataTransfer.files.length) {
        this.uploadFile(event.dataTransfer.files[0])
      } else if (event.dataTransfer.getData('text/html')) {
        this.$refs.editor.focus()
        document.execCommand('insertHTML', false, event.dataTransfer.getData('text/html'))
      }
    },
    handlePaste(event) {
      event.preventDefault()
      const text = event.clipboardData.getData('text/plain')
      const html = event.clipboardData.getData('text/html')
      if (text) {
        document.execCommand('insertText', false, text)
      } else if (html) {
        document.execCommand('insertHTML', false, html)
      }
    },
    handleFileChange(event) {
      this.uploadFile(event.target.files[0])
    },
    uploadFile(file) {
      if (this.uploadUrl) {
        const formData = new FormData()
        formData.append('file', file)
        fetch(this.uploadUrl, {
          method: 'POST',
          body: formData
        }).then(response => response.json()).then(data => {
          if (data.success) {
            const img = document.createElement('img')
            img.src = data.url
            this.$refs.editor.focus()
            document.execCommand('insertHTML', false, img.outerHTML)
          }
        })
      } else {
        const reader = new FileReader()
        reader.onload = event => {
          const img = document.createElement('img')
          img.src = event.target.result
          this.$refs.editor.focus()
          document.execCommand('insertHTML', false, img.outerHTML)
        }
        reader.readAsDataURL(file)
      }
    }
  }
}
</script>

组件使用方法如下：

<template>
  <div>
    <RichTextEditor v-model="content" :uploadUrl="uploadUrl" />
  </div>
</template>

<script>
import RichTextEditor from './RichTextEditor.vue'

export default {
  components: {
    RichTextEditor
  },
  data() {
    return {
      content: '',
      uploadUrl: '/api/upload'
    }
  }
}
</script>

其中，`value`属性用于绑定富文本编辑器的内容，`uploadUrl`属性用于指定图片上传的地址。如果`uploadUrl`为空，则图片将以base64格式嵌入到内容中。