vue-quill-editor富文本使用多个富文本如何使用一个image方法插入图片放在不同的富文本上

在vue-quill-editor中，可以使用一个image方法来插入图片并放置在不同的富文本上。下面是一个示例代码：

<template>
  <div>
    <div ref="editor1"></div>
    <div ref="editor2"></div>
    <button @click="insertImage">插入图片</button>
  </div>
</template>

<script>
import Quill from 'quill';

export default {
  mounted() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      this.editor1 = new Quill(this.$refs.editor1, {
        theme: 'snow'
      });

      this.editor2 = new Quill(this.$refs.editor2, {
        theme: 'snow'
      });
    },
    insertImage() {
      const imageUrl = 'https://example.com/image.jpg'; // 图片的URL

      // 在第一个富文本编辑器中插入图片
      const range1 = this.editor1.getSelection();
      this.editor1.insertEmbed(range1.index, 'image', imageUrl);

      // 在第二个富文本编辑器中插入图片
      const range2 = this.editor2.getSelection();
      this.editor2.insertEmbed(range2.index, 'image', imageUrl);
    }
  }
};
</script>

在上面的示例中，我们使用了两个`<div>`元素作为富文本编辑器的容器，并通过`ref`属性引用它们。在`mounted`钩子函数中，我们使用`new Quill()`方法初始化了两个富文本编辑器实例。

在`insertImage`方法中，我们首先获取当前光标的位置（即`range`），然后使用`insertEmbed`方法在指定位置插入图片。通过指定`'image'`作为第二个参数，我们告诉编辑器要插入的是一个图片，并将图片的URL作为第三个参数传递给`insertEmbed`方法。

这样，你就可以在不同的富文本编辑器中使用一个image方法插入图片了。