本地图文直接复制到富文本编辑器中
原创
在使用 braft-editor 时，发现如果复制一段文字+图片的信息，在粘贴到富文本编辑器中时，只有文本被成功粘贴了，图片会丢失。但是单独复制一张图片是能够成功的。可以在在线编辑器上试试看。
起初我以为是编辑器的问题，所以在知乎、豆瓣日记的编辑器上都尝试了一番 ---- 原来也都不支持啊。于是我就想有没有什么黑科技可以实现，比如获取剪贴板内容，得到 <img> 标签，然后在编辑器 onFocus 的时候触发 uploadFn 上传图片。后来发现，是在下天真了，本以为和复制线上内容一样，能轻松得到一段包含 img 的 html 结构。
其实不然，根本原因是剪贴板里的图片是用 File 对象承载的，所以单单复制一张图片，可以成功粘贴。一旦文字+图片了，就是用 text/html 来获取剪贴板内容，所以是无法粘贴图片的。
在得出这个结论之前，我尝试了以下方法：
- 通过 Clipboard.read() 获取：虽然这个接口文档中写的是可以获取到图片，但看起来好像也是不支持图文一起复制的场景，更惨的是…这个接口目前只有 FF 支持：
navigator.clipboard.read().then(data => {
for (let i=0; i<data.items.length; i++) {
if (data.items[i].type != "text/plain") {
alert("Clipboard contains non-text data. Unable to access it.");
} else {
textElem.innerText = data.items[i].getAs("text/plain");
}
}
});- 更传统一点的方法是用 e.clipboardData，监听 document 某个事件，然后拿到当前 clipboard 内容，不过要注意这个方法在 IE 下需要用 e.clipboardData('Text')：
if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.getData) {
// Check for 'text/html' in types list. See abligh's answer below for deatils on
// why the DOMStringList bit is needed. We cannot fall back to 'text/plain' as
// Safari/Edge don't advertise HTML data even if it is available
types = e.clipboardData.types;
if (((types instanceof DOMStringList) && types.contains("text/html")) || (types.indexOf && types.indexOf('text/html') !== -1)) {
// Extract data and pass it to callback
pastedData = e.clipboardData.getData('text/html');
processPaste(editableDiv, pastedData);
// Stop the data from actually being pasted
e.stopPropagation();
e.preventDefault();
return false;
}
}- 如果只想粘贴单张图片，可以遍历 e.clipboardData.items，这个方案很成熟了，详见后面的参考资料。
参考资料
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读