vue 使用富文本编译器之vue-quill-editor中一个组件使用两个quill-editor导致上传图片都是在第一个里面

您好！对于vue-quill-editor中一个组件使用两个quill-editor导致上传图片都是在第一个编辑器内的问题，您可以通过以下步骤解决：

1. 确保每个quill-editor组件有唯一的标识符，例如id或ref。
2. 在每个quill-editor组件中，使用不同的配置对象来初始化编辑器。确保每个编辑器使用独立的配置，并且配置中的回调函数（例如imageHandler）也是独立的。
3. 在配置对象中，使用不同的upload方法将图片上传到不同的位置。
4. 在上传图片时，确保将图片上传到正确的位置，并将URL插入到相应的编辑器中。

以下是一个简单的示例代码，演示如何使用两个quill-editor组件并分别处理图片上传：

<template>
  <div>
    <quill-editor ref="editor1" :options="editorOptions1"></quill-editor>
    <quill-editor ref="editor2" :options="editorOptions2"></quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      editorOptions1: {
        // 第一个编辑器的配置
        // ...
        imageHandler: this.imageHandler1
      },
      editorOptions2: {
        // 第二个编辑器的配置
        // ...
        imageHandler: this.imageHandler2
      }
    }
  },
  methods: {
    imageHandler1(image, callback) {
      // 第一个编辑器的图片上传处理
      // 将图片上传到对应位置
      // 获取图片URL等操作
      // ...
      callback('https://example.com/image1.jpg'); // 将图片URL插入到编辑器中
    },
    imageHandler2(image, callback) {
      // 第二个编辑器的图片上传处理
      // 将图片上传到对应位置
      // 获取图片URL等操作
      // ...
      callback('https://example.com/image2.jpg'); // 将图片URL插入到编辑器中
    }
  }
}
</script>

在这个示例中，我们通过`ref`属性给每个quill-editor组件命名，并分别定义了`editorOptions1`和`editorOptions2`对象，它们分别用于配置第一个和第二个编辑器。每个编辑器都有独立的`imageHandler`方法来处理图片上传，并将对应的URL插入到相应的编辑器中。

希望这个解决方案可以帮助到您！如果还有其他问题，请随时提问。