quillvue3富文本编辑器图片

QuillVue3是Quill富文本编辑器的Vue 3版本。Quill是一个基于HTML5的富文本编辑器，它提供了现代Web应用所需的富文本编辑功能，同时提供了简洁的API和可扩展的架构。在QuillVue3中嵌入图片通常涉及以下步骤：

1. 首先确保你已经在Vue项目中安装了Quill编辑器，并且正确引入了QuillVue3。
2. 在你的Vue组件中，创建一个Quill编辑器实例，并设置编辑器的内容容器。
3. 使用Quill的API向编辑器中插入图片。你可以通过创建一个图片格式的Delta对象，并使用编辑器的`setContents`方法将图片插入到编辑器中。

例如，下面的代码展示了如何在QuillVue3中插入一张图片：

<template>
  <div id="editor">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
    />
  </div>
</template>

<script>
import { ref } from 'vue';
import { QuillEditor } from '@vueup/vue-quill';

export default {
  components: {
    QuillEditor,
  },
  setup() {
    const content = ref('');
    const editorOption = {
      placeholder: '请输入内容...',
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline', 'strike'], // 加粗、斜体、下划线、删除线
          // 更多的工具栏配置...
        ],
      },
    };

    function onEditorReady(quill) {
      // 插入图片的函数
      function insertImage() {
        const range = quill.getSelection();
        if (range) {
          quill.insertEmbed(range.index, 'image', '/path/to/image.jpg');
          quill.setSelection(range.index + 1);
        }
      }

      // 调用插入图片的函数
      insertImage();
    }

    return {
      content,
      editorOption,
      onEditorReady,
    };
  },
};
</script>

在上面的代码中，`insertImage`函数首先获取当前的光标位置，然后使用`insertEmbed`方法在光标位置插入一张图片，其中`'/path/to/image.jpg'`应替换为你想要插入的图片的实际路径。