富文本编辑器 word整体粘贴实现图片自动展示(一)

富文本编辑器word整体粘贴实现图片正常显示

在使用富文本编辑器时，通常word整体粘贴时，图片总是无法正常显示，图片地址会是src="//0"的情况，这主要时因为，我们整体粘贴时，实际上我我们粘贴过去的是一片word的dom字符串，其中编辑器会为我们过滤其他无用标签，保留了主要部分。由于粘贴时候word文档中图片部分实际上引用的是本地地址，由于浏览器和js限制无法读取或者操作本地文件，因此无法正常显示。如果是网络上复制粘贴的文档则可以正常显示。

一下是从word直接粘贴过来的效果

一下是从网络上粘贴过来的效果

粘贴事件

通常要解决从word中复制粘贴到富文本编辑器中，都离不开这个paste事件,我们简单分析一下这个事件。
粘贴事件提供了一个clipboardData的属性，如果该属性有items属性，那么就可以查看items中是否有图片类型的数据了。
clipboardData的属性介绍：
属性 类型 说明
dropEffect String 默认是 none
effectAllowed String 默认是 uninitialized
files FileList 粘贴操作为空List
items DataTransferItemList 剪切板中的各项数据
types Array 剪切板中的数据类型

items是一个DataTransferItemList(浏览器基于file对象实现的方法，所以能够转换成file对象)对象，里面都是DataTransferItem类型的数据了。
items的DataTransferItem有两个属性kind和type
kind 一般为string或者file
type 具体的数据类型，例如具体是哪种类型字符串或者哪种类型的文件，即MIME-Type
方法
getAsFile 空 如果kind是file，可以用该方法获取到文件
getAsString 回调函数 如果kind是string，可以用该方法获取到字符串，字符串需要用回调函数得到，回调函数的第一个参数就是剪切板中的字符串

通常我们通过以上提供的属性就能够实现不论是从何处粘贴的内容,从这里我们也可以看到其冲粘贴的内容，这里简单实现一个单张图片粘贴的例子。

单张图片粘贴

let quill = this.$refs.myQuillEditor.quill;
    quill.root.addEventListener(
      "paste",
      (evt) => {
   
        // 粘贴事件
        if (
          evt.clipboardData &&
          evt.clipboardData.files &&
          evt.clipboardData.files.length
        ) {
   
          evt.preventDefault