关于clipboard:我从Typoro中学到的Clipboard妙用二md
上篇介绍了一下我从Typora中学到的Clipboard妙用：咱们从网页复制文字时，剪切板中会塞入两种格局的数据：纯文本和富文本。当咱们粘贴到其余编辑器时，文本编辑器会应用纯文本数据，富文本编辑器会应用富文本数据(Typora中会把对应的文本提取成MarkDown格局)。 具体内容和简略的代码实现能够查看：我从Typora中学到的Clipboard妙用.md Typora中图片解决形式常常应用Typora的人应该都晓得Typora对于解决图片也有着优良的应用体验，当插入图片时，你能够指定图片存储形式： 当咱们插入图片时，上传服务会把剪切板中的图片或拖拽的图片主动上传，替换成网络地址。这样当你发送文档给他人时或者公布文档到博客时，不会因为文档在本地而无奈查看。 我本人也写了一个小工具：file-uploader-cli ,能够解决文件上传到对应的存储服务，比方github、ftp、对象存储等，能够拜访github地址查看具体的配置办法(uPic和Picgo也反对Typora)。 对于自定义上传服务，当有图片插入时，Typora会调用上传服务并传入文件门路，上传服务在控制台打印上传后果即可。读取剪切板中图片数据咱们还是在控制台中进行疾速测试，关上任意网页，在element面板中找到任意标签增加contenteditable属性，以后标签就变成可编辑元素了。 <p contenteditable> xxxx</p>控制台中执行代码： document.addEventListener('paste', function(e){ console.log(e) const items = e.clipboardData.items; console.log(items) const fileList = e.clipboardData.files console.log(fileList) for(let i=0;i< items.length;i++){ console.log(items[i]) let f = items[i].getAsFile() console.log(f) } e.preventDefault();})本地文件复制本地文件(能够是图片或者其余格式文件)，并在标签中执行粘贴操作： 从上图能够看出，从clipboardData中取出图片数据有两种形式： e.clipboardData.items，是一个DataTransferItemList类型数据，每个元素是一个DataTransferItem类型，能够通过DataTransferItem.getAsFile()获取到File对象e.clipboardData.files 是一个FileList, 每个元素是一个File只有当粘贴的是本地文件时，DataTransferItem.getAsFile才能够获取到数据，否则为null。网络图片当复制的数据是网络图片时，分为两种状况： 只蕴含网络图片蕴含网络图片和文字当复制的是网络图片(从网页间接右键复制图片)时，clipboard会失去两种数据：text/html和image/png。具体能够参考：我从Typora中学到的Clipboard妙用.md 蕴含网络图片和文字时，clipboard会失去：text/plain和text/html。 所以对于蕴含网络图片的两种形式，在paste事件中获取到的数据也是不同的： 获取图片文件从下面的信息咱们能够理解到：只有当粘贴的为本地图像和网络图片时，咱们能够通过DataTransferItem.getAsFile获取到图片对象；当蕴含文本时能够通过DataTransferItem.getAsString获取到纯文本和富文本数据。 Typora是如何解决图片数据的粘贴图片到Typora如果是本地文件，Typora会依据偏好设置中的图片设置进行保留： 当抉择“上传服务”时，会将本地图片地址传给自定义的图片上传服务，如果上传胜利则替换成网络地址；如果上传失败则放弃本地图片的援用。如果抉择了其余配置，则会复制图片到对应配置的文件夹下。如果是剪切板中的非本地图片(比方截图复制)，会先保留老本地文件，再进行上传或复制。 如果是富文本数据，会间接进行渲染(未勾选对网络地位的图片利用上述规定)。 拖拽图片到TyporaTypora反对paste图片主动上传，也反对拖拽图片上传，咱们能够通过Drop Event获取到File对象 document.addEventListener('drop', function(e){ console.log(e) const items = e.dataTransfer.items; console.log(items) const fileList = e.dataTransfer.files console.log(fileList) e.preventDefault();})拖拽数据存储在DragEvent.dataTransfer中： ...