剪贴板自定义类型跨浏览器支持

引子

在编辑器开发中, 遇到了需要设置内容到剪贴板和获取并剪贴板内容的情况. 有关以下问题

• 跨浏览器获取Clipboard
• 从剪贴板中获取不同类型数据

可以参考 THE DEFINITIVE GUIDE TO COPYING AND PASTING IN JAVASCRIPT

下面分享以下在 THE DEFINITIVE GUIDE TO COPYING AND PASTING IN JAVASCRIPT 基础上如何实现跨浏览器支持自定义类型.

自定类型浏览器支持情况

从 THE DEFINITIVE GUIDE TO COPYING AND PASTING IN JAVASCRIPT 一文我们可以了解
到clipboardData.setData(type, value) API 中 type 在不同浏览器中的支持情况:

• Chrome and Safari: They support any content type on the clipboardData, including custom types. So, we can call clipboardData.setData('application/lucidObjects', serializedObjects) for pasting, and then call var serialized = clipboardData.getData('application/lucidObjects')
• Firefox: It currently only allows access to the data types described above. You can set custom types on copy, but when pasting, only the white-listed types are passed through.
• Internet Explorer: In true IE fashion, it supports just two data types: Text and URL. Oh, and if you set one, you can’t set the other (it gets nulled out). There is a hack, however, that also allows us to indirectly get and set HTML.

Windows Edge 浏览器的情况与 FireFox 类似 ( Windows Edge 浏览器2016年才发布, THE DEFINITIVE GUIDE TO COPYING AND PASTING IN JAVASCRIPT 一文写于 2014 年, 故没有提到 Windows Edge ).

在编辑器(仅支持 Webkit 内核浏览器和 Windows Edge )中, 除了设置text/plain, text/html 到剪贴板外, 还会用到挺多自定义类型的数据 (如 text/yne-table-json, text/yne-json). 自定义类型数据的主要使用场景是:

• 同一个端不同笔记间(同一个编辑器, 不同实例)相互拷贝粘贴
• 不同端的编辑器(不同编辑器, 不同实例)相互拷贝粘贴, 如从PC端中的编辑器拷贝, 粘贴到Web浏览器的编辑器中

但 Windows Edge 浏览器的剪贴板又不支持自定义类型数据, 于是琢磨着如何应对 Windows Edge 浏览器.

1. 在 Windows Edge 下 try ... catch ... 设置内容到剪贴板, 如果不能设置到剪贴板, 则不设置.
2. 无论在 Webkit 内核浏览器还是 Windows Edge 中, 都能统一处理设置到剪贴板.

第一种解决方案肯定不太好, 而第二种方案又该如何实现呢?

思路

在 Clipboard API and events - Mandatory data types 可以发现, 剪贴板支持读取的数据类型:

• text/plain
• text/uri-list
• text/csv
• text/css
• text/html
• application/xhtml+xml
• image/png
• image/jpg, image/jpeg
• image/