quill富文本编辑器vue3自定义图片上传

### 实现 Vue3 中 Quill 富文本编辑器自定义图片上传

#### 安装依赖库
为了在 Vue3 项目中使用 `vue-quill-editor` 并实现自定义图片上传功能，需先安装必要的包。

npm install @vueup/vue-quill quill --save

此命令将安装适用于 Vue3 的 Quill 编辑器及其核心库[^4]。

#### 配置全局样式
确保项目的入口文件（通常是 main.js 或 app.vue）中引入了 Quill 的 CSS 文件：

// main.js or app.vue <script setup>
import '@vueup/vue-quill/dist/style.css'

这一步骤对于正确显示编辑器界面至关重要[^3]。

#### 创建富文本编辑器组件
创建一个新的 Vue 组件用于封装 Quill Editor，并在此处配置图片上传逻辑。

<template>
  <div class="editor-container">
    <quill-editor ref="myQuillEditor"
                  v-model:content="content"
                  :options="editorOptions"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)">
      <!-- 自定义工具栏 -->
      <template #toolbar>
        <span class="ql-formats"><button type="button" @click="uploadImage">Insert image</button></span>
      </template>
    </quill-editor>
    
    <!-- 图片上传对话框 -->
    <el-dialog title="Upload Image" v-model="dialogVisible" width="30%">
      <el-upload drag action="/api/upload/image"
                 :before-upload="handleBeforeUpload"
                 :on-success="richUploadSuccess"
                 multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">Drop files here, or click to upload.</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { ElDialog, ElMessage, ElUpload } from 'element-plus';

export default defineComponent({
  name: "RichTextEditor",
  
  props: {
    modelValue: String,
  },
  
  emits: ['update:modelValue'],
  
  setup(props, context) {
    const state = reactive({
      content: '',
      editorOptions: {
        modules: {
          toolbar: [
            [{ header: [1, 2, false] }],
            ['bold', 'italic', 'underline','image']
          ]
        }
      },
      dialogVisible: false,
      
      handleBeforeUpload(file){
        console.log('File before uploading:', file);
        return true;
      },

      richUploadSuccess(response, file, fileList){
        // 假设服务器返回的是图片 URL
        let imageUrl = response.url || '';
        
        // 获取当前实例中的 Quill 对象
        var quill = this.$refs.myQuillEditor.quill;

        // 插入图片到光标位置
        if (imageUrl && quill) {
          let length = quill.getLength();
          quill.insertEmbed(length, 'image', imageUrl);          
          quill.setSelection(length + 1);

          ElMessage.success(`Image uploaded successfully`);
        }

        this.dialogVisible = false;       
      },

      uploadImage(){
        this.dialogVisible = true;
      }
    });

    watch(() => props.modelValue, newValue => {
      state.content = newValue;
    });
    
    watch(() => state.content, newValue => {
      context.emit('update:modelValue', newValue);
    });

    return {
      ...toRefs(state),
      onEditorBlur(editor){},
      onEditorFocus(editor){},
      onEditorReady(editor){}
    };
  }
});
</script>

<style scoped>
.editor-container{
  margin-bottom: 2rem;
}
</style>

上述代码实现了如下特性：
- 使用 Element Plus 提供的 `<el-dialog>` 和 `<el-upload>` 来构建图片上传窗口。
- 当点击插入图片按钮时弹出上传对话框；当图片上传完成后自动关闭对话框并将图片链接插入至编辑区[^1]。
- 支持通过双向绑定 (`v-model`) 控制编辑器的内容更新[^5]。