quill 系统截图粘贴

146 阅读1分钟

问题:quill 粘贴图片会被默认转为base64格式,会导致富文本内容增多,不利于后端保存

需求:富文本粘贴时需要把base64格式 图片改为 线上地址 并插入富文本相应位置

quill version 2.0.0-dev.4

   // 引入 富文本 上传相关的模块
   let Uploader = Quill.import('modules/uploader')
   import Delta from 'quill-delta';
   import Emitter from 'quill/core/emitter';
   
   
   
   methods: {
       upload(imgs) {
          // imgs 为 二进制图片集合
          return imgs.map(file => {
             return new Promise(async (resolve) => {
                  const url = await uploadApi(file) // 调用上传接口 返回 一个线上地址
                  resolve(url) // 返回地址
             })
          })
       }
   }
   
   mounted() {
       const _this = this
       Uploader.DEFAULTS = {
            mimetypes: ['image/png', 'image/jpeg'],
	    handler(range, files) {
                // 通过上传接口获取图片线上地址,并插入该位置
		Promise.all(_this.upload(files)).then(images => {
                    const update = images.reduce((delta, image) => {
			return delta.insert({ image });
                      },new Delta().retain(range.index).delete(range.length)
                    );

                    this.quill.updateContents(update, Emitter.sources.USER);
                    this.quill.setSelection(
                        range.index + images.length,
                        Emitter.sources.SILENT,
                    )
                })
            }
        }
   }

如今我努力奔跑,不过是为了追上那个曾经被寄予厚望的自己