Vue3使用vue-quill富文本编辑器并实现图片自定义上传替换默认base64格式图片

在Vue3中使用vue-quill富文本编辑器，并实现自定义图片上传替换默认的base64格式图片，你可以通过监听editor的create-image钩子来实现。以下是一个简化的示例：

1. 安装vue-quill-editor:

npm install vue-quill-editor@next --save

2. 在组件中引入并使用vue-quill-editor:

<template>
  <quill-editor v-model="content"></quill-editor>
</template>
 
<script setup>
import { ref } from 'vue';
import { QuillEditor, quillEditorProps } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
 
const content = ref('');
 
// 自定义图片上传处理
const handleImageAdd = (file, editor) => {
  // 创建formData
  const formData = new FormData();
  formData.append('image', file);
 
  // 这里替换为你的图片上传接口
  fetch('YOUR_UPLOAD_API_URL', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    // 假设服务器返回的图片地址在data.url
    editor.insertEmbed(editor.getSelection().index, 'image', data.url);
  })
  .catch(error => {
    console.error('Error:', error);
  });
};
 
// 将自定义的图片上传处理函数传递给quill-editor
const editorOptions = {
  handlers: {
    'image': handleImageAdd
  }
};
</script>

在上述代码中，我们首先引入了quill-editor和必要的样式。然后，我们定义了一个响应式数据content，它将作为编辑器的v-model。我们还实现了一个handleImageAdd函数，它会在用户添加图片时被调用。在这个函数中，我们创建了一个FormData对象，将选中的图片添加进去，并发送到服务器进行上传处理。服务器返回的图片URL将被插入到编辑器中。

最后，我们创建了一个editorOptions对象，将自定义的图片处理函数传递给quill-editor的handlers选项。这样，每当用户尝试添加图片时，handleImageAdd函数就会被调用，实现自定义图片上传和插入的功能。