vue前端富文本组件 quill-editor 粘贴图片的处理

已于 2023-08-28 13:52:46 修改
阅读量1.3k 收藏 4
点赞数 1
文章标签： 前端 vue.js javascript
于 2023-08-28 13:48:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Survivor_L/article/details/132537215
版权

页面组件：

<template>
  <div>
    <!-- 图片上传组件辅助 -->
    <el-upload
      class="avatar-uploader quill-img"
      :action="uploadImgUrl"
      name="file"
      :headers="headers"
      :show-file-list="false"
      :on-success="quillImgSuccess"
      :on-error="uploadError"
      :before-upload="quillImgBefore"
      accept='.jpg,.jpeg,.png,.gif'
    ></el-upload>

    <!-- 富文本组件 -->
    <quill-editor
      class="editor"
      v-model="content"
      ref="quillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
  </div>
</template>

组件配置：

editorOption: {
        theme: "snow", // or 'bubble'
        placeholder: "请输入内容",
        modules: {
          clipboard:{
            // 粘贴板，处理粘贴图片  *** 主要是这里
            matchers: [[Node.ELEMENT_NODE, this.desMatcher]],
          },
          toolbar: {
            container: this.message ? this.message : toolbarOptions,
            handlers: {
              image: function(value) {
                if (value) {
                  // 触发input框选择图片文件
                  document.querySelector(".quill-img input").click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          },

        }
      },

监听粘贴板事件处理：

//添加匹粘贴板事件 粘贴处理
    desMatcher(node, Delta) {
      let ops = []
      Delta.ops.forEach(op => {
        if (op.insert && typeof op.insert === 'string') {// 如果粘贴了图片，这里会是一个对象，如果是字符串则可以添加
          ops.push({
            insert: op.insert,
          })
        }else{ //给出提醒
          if(op.insert.image){
            // 只给出提醒
            // this.$message.error('图片不可粘贴，请使用图片上传按钮哦！');

            // 处理上传图片
            if (op.insert.image.includes(';base64')) {
              let file = this.base64ToFile(op.insert.image, op.insert.image.name)
              var formData = new FormData();
              formData.append('file',file)
              uploadImagesFile(formData).then(res => {
                console.log("res", res);
                let quill = this.$refs.quillEditor.quill;
                if (res.code === 200) {
                  let length = quill.getSelection().index; //光标位置
                  quill.insertEmbed(length, "image", res.url); // 插入图片  图片地址
                  quill.setSelection(length + 1); //光标后移一位   调整光标到最后
                }
              }).catch(err => {
                console.error(err);
              });
            } else {
              ops.push({
                insert: op.insert,
              })
            }
          }
        }
      })
      Delta.ops = ops
      return Delta
    },

    base64ToFile(base64, fileName) {
      let data = base64.split(',');
      let type = data[0].match(/:(.*?);/)[1];
      let suffix = type.split('/')[1];
      const bstr = window.atob(data[1]);
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      const file =  new File([u8arr], `${fileName}.${suffix}`, {
        type: type
      })
      return file;
    },

全部代码：

<template>
  <div>
    <!-- 图片上传组件辅助 -->
    <el-upload
      class="avatar-uploader quill-img"
      :action="uploadImgUrl"
      name="file"
      :headers="headers"
      :show-file-list="false"
      :on-success="quillImgSuccess"
      :on-error="uploadError"
      :before-upload="quillImgBefore"
      accept='.jpg,.jpeg,.png,.gif'
    ></el-upload>

    <!-- 富文本组件 -->
    <quill-editor
      class="editor"
      v-model="content"
      ref="quillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'

// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
  // ["blockquote", "code-block"],                    // 引用  代码块
  // [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
  // [{ indent: "-1" }, { indent: "+1" }],            // 缩进
  // [{ size: ["small", false, "large", "huge"] }],   // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
  // [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
  // [{ align: [] }],                                 // 对齐方式
  ["clean"],                                       // 清除文本格式
  //["link", "image", "video"]                     // 链接、图片、视频
  ["image"]                                        // 图片
];

import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import {uploadImagesFile} from "@/utils/uploadImg";

export default {
  props: {
    /* 编辑器的内容 */
    value: {
      type: String
    },
    /* 图片大小 */
    maxSize: {
      type: Number,
      default: 4000 //kb
    },
    message: Array
  },
  components: { quillEditor },
  data() {
    return {
      content: this.value,
      editorOption: {
        theme: "snow", // or 'bubble'
        placeholder: "请输入内容",
        modules: {
          clipboard:{
            // 粘贴板，处理粘贴图片  *** 主要是这里
            matchers: [[Node.ELEMENT_NODE, this.desMatcher]],
          },
          toolbar: {
            container: this.message ? this.message : toolbarOptions,
            handlers: {
              image: function(value) {
                if (value) {
                  // 触发input框选择图片文件
                  document.querySelector(".quill-img input").click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          },

        }
      },
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/uploadImagesFile", // 上传的图片服务器地址
      headers: {
        Authorization: 'Bearer ' + getToken()
      }
    };
  },
  watch: {
    value: function() {
      this.content = this.value;
    }
  },
  methods: {
    onEditorBlur() {
      //失去焦点事件
    },
    onEditorFocus() {
      //获得焦点事件
    },
    onEditorChange() {
      //内容改变事件
      this.$emit("input", this.content);
    },

    //添加匹粘贴板事件 粘贴处理
    desMatcher(node, Delta) {
      let ops = []
      Delta.ops.forEach(op => {
        if (op.insert && typeof op.insert === 'string') {// 如果粘贴了图片，这里会是一个对象，如果是字符串则可以添加
          ops.push({
            insert: op.insert,
          })
        }else{ //给出提醒
          if(op.insert.image){
            // 只给出提醒
            // this.$message.error('图片不可粘贴，请使用图片上传按钮哦！');

            // 处理上传图片
            if (op.insert.image.includes(';base64')) {
              let file = this.base64ToFile(op.insert.image, op.insert.image.name)
              var formData = new FormData();
              formData.append('file',file)
              uploadImagesFile(formData).then(res => {
                console.log("res", res);
                let quill = this.$refs.quillEditor.quill;
                if (res.code === 200) {
                  let length = quill.getSelection().index; //光标位置
                  quill.insertEmbed(length, "image", res.url); // 插入图片  图片地址
                  quill.setSelection(length + 1); //光标后移一位   调整光标到最后
                }
              }).catch(err => {
                console.error(err);
              });
            } else {
              ops.push({
                insert: op.insert,
              })
            }
          }
        }
      })
      Delta.ops = ops
      return Delta
    },

    base64ToFile(base64, fileName) {
      let data = base64.split(',');
      let type = data[0].match(/:(.*?);/)[1];
      let suffix = type.split('/')[1];
      const bstr = window.atob(data[1]);
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      const file =  new File([u8arr], `${fileName}.${suffix}`, {
        type: type
      })
      return file;
    },


    // 富文本图片上传前
    quillImgBefore(file) {
      let fileType = file.type;
			if(fileType === 'image/jpeg' || fileType === 'image/png'){
				return true;
			}else {
				this.$message.error('请插入图片类型文件(jpg/jpeg/png)');
				return false;
			}
    },

    quillImgSuccess(res, file) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let quill = this.$refs.quillEditor.quill;
      // 如果上传成功
      if (res.code == 200) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.url为服务器返回的图片地址
        quill.insertEmbed(length, "image", res.url);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
    },
    // 富文本图片上传失败
    uploadError() {
      // loading动画消失
      this.$message.error("图片插入失败");
    }
  }
};
</script>

<style>
.editor {
  line-height: normal !important;
  height: 350px;
  padding-bottom: 50px;
}
.quill-img {
  display: none;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>
Survivor_L
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
10-15
主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue使用富文本编辑器quill、图片放缩等配置使用
最新发布
weixin_50946965的博客
04-22 442
Quill富文本编辑器上传图片，图片太大的话，展示出来，就会出现很多问题，为了解决这些问题，如果在上传图片的时候就把图片编辑好大小。解决方法：在vue.config.js中添加配置，然后重启项目。暂时还没有用上，可以看看这篇博文。第二步，在组件里引入使用。
vue-quill-editor粘贴图片，vue-quill-editor复制图片
imkaifan的博客
05-07 3531
vue-quill-editor复制图片实际上会以：base64形式的进行一个上传，base64写进数据库那不是gg。 解决思路： 将复制的图片上传至服务器，将服务器返回的图片地址作为img标签插入富文本编辑器中。 此功能是在已有功能上的增加用户体验，基础构建代码请看这里 代码(vue项目)： mounted() { // 自定义粘贴图片功能 let quill = this.$refs.myQuillEditor.quill; this.$forceUpdate();
vue实现富文本编辑器上传（粘贴）图片 + 文字
qq_46561492的博客
11-02 3607
在使用vue-quill-editor富文本的时候，对于图片的处理经常是将图片转换成base64，再上传数据库，但是base64不好存储。原理：首先将图片上传服务器，再将图片插入到富文本中，同时光标后移一位。引用：全局引用在main.js中，不过我的是页面引用。
vue3富文本编辑器vue-quill-editor、图片缩放ImageResize详细配置及使用教程
热门推荐
qq_33674679的博客
12-01 2万+
vue3富文本编辑器vue-quill-editor详细配置及使用
vue-quill-editor 粘贴文字图片及图片上传
zhangxinrongr的博客
02-26 1217
问题：vue-quill-editor富文本编辑器上传图片默认为，存入数据库过于过于庞大，使用 paste 实现图片地址上传。
vue使用富文本编辑器:vue-quill-editor粘贴图片+图片上传服务器+预览图片
xuxuan1997的博客
10-23 8386
引入vue-quill-editor 初始化vue-quill-editor npm install vue-quill-editor --save 部分页面引入组件 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import {quillEditor} from 'vue-quill-editor' 全局引入组件
quill富文本编辑器处理复制图像的解决方法
jansonKOU的博客
10-26 755
quill编辑器对粘贴doc文档中图片的上传处理及单独粘贴图片时的上传处理
vue中使用vue-quill-editor并且粘贴直接上传图片
chelly_z的博客
11-02 1238
vue-quill-editor富文本，粘贴图片时默认都是base64格式，比较大，所以就需要传到服务器中
使用vue-quill-editor实现图片截图复制粘贴上传
一个女胖子的博客
03-27 828
运营需要用多张图片进行OCR识别，图片来源一般是运营的截图，直接粘贴过来，然后需求请求OCR截图提交图片list，粘贴图片的同时需要上传图片到cdn地址；
antd + vue2 + vue-quill-editor实现富文本+粘贴图片+图片大小设置
weixin_49223836的博客
06-17 4745
antd+vue+vue-quill-editor做富文本，图片粘贴改变大小
Vue-Quill-Editor 回显 html 图片样式显示不出来
qq_51480319的博客
09-11 1010
Vue-Quill-Editor 回显 html 图片样式显示不出来
关于富文本编辑器的图片处理
a_SuperAdmin的博客
03-25 2691
不经意间发现项目内有个bug 就是推文详情是使用富文本编辑器处理的，但是富文本编辑器支持的数据又比较局限，上一位前辈并没有把它处理好。于是就出现了如下画面： 文字都在，图不见了 控制台里也看不见 也不知道问题出在哪里了，再看看JS代码吧。 打印content试试： 很明显！content里有img图片！只是富文本编辑器不显示！ 那先排除一下数据问题吧，富文本编辑器只支持img的src属性，数据里用的是data-src，那么我们把content当做字符串处理一下： var content1=content
富文本编辑上传的图片进行处理
diboxuan0073的博客
11-06 247
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
vue-quill-editor使用粘贴功能把图片上传进服务器
weixin_42178670的博客
07-01 997
解决方法 可以使用quill-image-paste，使用方式如下 import '../../assets/image-paste.min.js'; // 然后在data里的editorOption的modules中添加imagePaste editorOption: { modules: { /* 还有一些其他的模块*/ imagePaste: { addImageBlob: function (blob, callback) {
quillEditor 配置图片element自定义上传，包含粘贴图片和工具栏上传图片
zzqz的博客
07-15 831
本文主要关注粘贴图片上传，因为点击工具栏可以增加触发事件addHandler 直接上代码： 标签部分： <el-upload :action="photoUploadUrl" :show-file-list="false" :on-success="handleQuillImgSuccess" with-credentials accept="image/gif, image/jpeg, image/jpg, image/bmp, image/png" .
quill富文本编辑器-粘贴图片上传，base64换线上地址保存
weixin_53787454的博客
05-17 4400
quill富文本编辑器-粘贴图片上传，base64换线上地址保存
vue-quill-editor粘贴图片
09-13
在vue-quill-editor中粘贴图片的实现思路是将复制的图片上传至服务器，并将服务器返回的图片地址插入到富文本编辑器中。首先，在mounted方法中添加一个监听paste事件的事件处理函数。当粘贴事件发生时，判断粘贴的内容中是否包含图片文件。如果包含图片文件，则将图片文件以FormData的形式进行上传。上传成功后，获取到服务器返回的图片地址，然后将该地址插入到富文本编辑器的光标位置之后，实现粘贴图片的功能。下面是一个具体的实现代码示例： ```javascript mounted() { let quill = this.$refs.myQuillEditor.quill; this.$forceUpdate(); quill.root.addEventListener("paste", (evt) => { if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) { evt.preventDefault(); [].forEach.call(evt.clipboardData.files, (file) => { if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) { return; } const formData = new FormData(); formData.append("pictureFile", file); makdwnImg(formData) .then((res) => { let quill = this.$refs.myQuillEditor.quill; if (res.data.code == 200) { let length = quill.getSelection().index; quill.insertEmbed(length, "image", res.data.data); quill.setSelection(length + 1); } }) .catch((err) => { console.error(err); }); }); } }, false); }, ``` 在这个示例代码中，首先获取到vue-quill-editor实例的quill对象。然后，使用addEventListener方法监听paste事件，并在事件处理函数中判断粘贴的内容是否包含图片文件。如果包含图片文件，则使用FormData对象将文件进行上传，并在上传成功后获取到服务器返回的图片地址。最后，使用quill对象的insertEmbed方法将图片地址插入到富文本编辑器的光标位置之后，并调整光标位置到插入图片之后的位置。这样就实现了vue-quill-editor粘贴图片的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值