vue-quill-editor反显后端返回的blob类型的图片

Vue Quill Editor是一个富文本编辑器组件，它允许你在前端处理内容并展示图片。当你从后端获取到Blob类型的图片数据，通常意味着图片是以二进制流的形式存在。为了在Vue Quill Editor中显示这样的图片，你需要按照以下步骤操作：

1. 首先，你需要将Blob转换为URL。这可以通过JavaScript的`URL.createObjectURL()`方法来完成。例如：

let blob = ...; // 后端返回的Blob对象
let imageUrl = URL.createObjectURL(blob);

2. 然后，在Quill Editor中设置图片插值。你可以通过`editor.insertEmbed()`方法插入HTML `<img>`标签，传入`QUILL.IMAGE`类型的引用以及创建的URL：

quill.insertEmbed(quill.getSelection().index, 'image', imageUrl, true);

这里`quill.getSelection().index`获取当前光标位置，`true`表示替换原有内容。

3. 当需要销毁这个图片时，记得取消创建的URL对象，防止内存泄露：

function destroyImage(url) {
  URL.revokeObjectURL(url);
}

// 使用时：
destroyImage(imageUrl);

相关问题

vue-quill-editor反显blob类型的图片

Vue-quill-editor是一个富文本编辑器插件，它允许你在Vue应用中添加WYSIWYG编辑功能。如果你遇到了反显Blob类型的图片的问题，通常是因为Blob对象需要先转换成其他格式（如Base64字符串或者URL）才能在编辑器中显示。

以下是一个基本步骤来解决这个问题：

1. **将Blob转换为DataURL**: 使用JavaScript的`URL.createObjectURL()`函数创建一个临时的URL，这个URL可以指向Blob内容。例如:

let blob = ...; // Blob对象
let url = URL.createObjectURL(blob);

2. **设置图片源**: 将生成的DataURL赋值给Quill Editor的插入图片功能，比如`quill.insertEmbed(index, 'image', url)`。

3. **处理编辑器更新**: 当用户编辑内容并保存时，你需要从编辑器中获取当前的内容，解码DataURL回Blob，并将其持久化到服务器。

4. **销毁时清理URL**: 确保在组件卸载或者关闭编辑器时，通过`URL.revokeObjectURL(url)`清除临时URL，释放资源。

vue-quill-editor手动下载

Vue-quill-editor是一个基于Quill富文本编辑器的Vue.js封装组件，它允许你在Vue项目中方便地集成Quill的功能。如果你需要从这个组件中手动下载用户编辑的内容，通常情况下，你不会直接下载整个编辑器内容，而是提供一个导出功能让用户导出他们编辑的文本。

以下是如何在Vue-quill-editor中添加导出功能的基本步骤：

1. 安装依赖：首先确保已经安装了`quill`和`vue-quill-editor`库。你可以使用npm或yarn来安装：

npm install quill vue-quill-editor
# 或者
yarn add quill vue-quill-editor

2. 在你的Vue组件中引入并配置quill-editor：

<template>
  <div ref="quillEditor" :quill="editorOptions"></div>
</template>

<script>
import QuillEditor from 'vue-quill-editor';
import Quill from 'quill';

export default {
  components: {
    QuillEditor,
  },
  data() {
    return {
      editorOptions: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'scriptType': 'sub' }, { 'scriptType': 'super' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [         ], // Custom buttons
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'font': [] }],
            [{ 'align': [] }],
          ],
        },
      },
    };
  },
  methods: {
    exportContent() {
      const content = this.$refs.quillEditor.getContents();
      // 将content转换为Blob或File对象，然后可以提供下载链接
      let blob = new Blob([content], { type: "text/plain;charset=utf-8" });
      saveAs(blob, 'output.txt');
    },
  },
};
</script>

在这个例子中，`exportContent`方法获取编辑器的内容，创建一个Blob对象，并使用浏览器内置的`saveAs`函数触发下载。记得处理兼容性问题，如IE不支持`Blob`，可能需要使用第三方库如`file-saver`。