phpexec复制技巧_实现一键复制前端复制敕令指南

当然，复制功能不仅只能供应复制纯文本，其更大的能力该当是复制富文本，如：图片、带有样式的文本等

举个栗子

在某些富文本编辑器，或者网页中，我们复制了一些东西，将其粘贴到另一个编辑器，可以创造，它保持了原位置的样式

如：我们在Typora内复制内容，将其粘贴到"大众年夜众号编辑器，其内容样式会共同复制过去，与Typora内预览保持同等，利用这特性可以将Typora作为公众年夜众号的编辑器，换样式只需改变主题即可

复制命令实质上便是通过程序掌握，将内容复制到用户的剪贴板

目前，浏览器紧张供应了两种方法，用于实现复制操作，分别为document.execCommand方法和Clipboard API

其是一个传统的Web API，用于实行一些剪切、复制和粘贴等编辑操作，其兼容性如下：

document.execCommand()是大约在 1990 年代末期，于早期的 Web 标准中引入的

只管该API仍旧在许多浏览器中受到支持，但其利用逐渐减少；在许多主流浏览器的开拓者文档中，document.execCommand() 已经被标记为弃用，不建议利用；紧张缘故原由是其存在一些安全和隐私方面的问题，可能会被恶意利用进行未经授权的数据访问；同时，由于不同浏览器对其API的实现存在差异，可能会给开拓带来无法预见的BUG

该API现在紧张作为一些兼容性开拓须要，用于处理在不支持新API的浏览器内利用

execCommand()紧张有三个操作：

利用该API，须要先选中目标文本，然后再调用API实行复制，复制结果就会涌如今剪切板

代码示例

以上代码将复制操作封装为一个函数，调用即可复制传入内容，详细利用时，可在页面供应一个按钮，由用户点击触发复制

把稳：复制操作只管即便不要有脚本自主实行，某些浏览器(由于安全考虑)可能会报错，可放在监听函数(如点击事宜内)，由用户主动触发操作

剪切命令与复制命令利用上险些同等，只需在选择后，调用document.execCommand("cut")实行剪切即可

首先需获取粘贴位置焦点，然后再调用命令实行粘贴

代码如下

与复制等操作同等，粘贴最好也由用户主动触发实行，只管即便避免脚本自动实行，防止报错

虽然，在一样平常情形下，document.execCommand依旧能实现目标，并且兼容性也可以

但在一些须要繁芜内容复制情形下，document.execCommand就难以实现了，其只能将选中的内容复制到剪贴板，无法向剪贴板任意写入内容；并且，由于它是同步的API，如果操作大量数据，页面会涌现卡顿

其是一个当代的Web API，旨在供应对剪贴板的更好掌握和更安全的操作，能够访问剪贴板，并且处理文本、图像等多种数据类型

Clipboard API最早是在2015年旁边，提出初步提案，其设计为一个异步API，并能够供应比 document.execCommand() 更细粒度的掌握；在2017年，其规范逐步成熟，在部分浏览器得到实验性支持，终极在2019年旁边得到广泛支持和采取

其兼容性大致如下：

紧张特点异步操作：所有操作都是异步的，返回一个Promise，不会壅塞主线程，提升了用户体验安全性：利用时，浏览器会哀求用户明确授权，防止恶意网站未经容许访问剪贴板数据；在某些浏览器中(如Chrome)，规定只有HTTPS协议的页面(生产环境；开拓环境localhost许可利用非加密协议)才能利用这个API数据类型支持：能处理多种数据类型，不仅限于纯文本，还包括图像、HTML等事宜处理：供应了copy、cut和paste事宜，使开拓者能够更灵巧地处理剪贴板操作紧张API

在浏览器在，利用Clipboard API紧张通过navigator.clipboard属性，其返回一个Clipboard工具，关于Clipboard API的操作都通过这个工具进行

如果navigator.clipboard属性返回undefined，就解释当前浏览器不支持该API

Clipboard工具紧张供应了四个方法，用于读写操作剪切板，都是异步方法，返回一个Promise工具；在利用时，浏览器有时会弹出确认权限授权的弹出，赞许后即可正常利用，如用户谢绝，脚本将会报错，可将对应代码放入try ··· catch中，处理报错，防止影响页面

针对权限问题，也可以通过navigator.permissions主动获取权限状态，在回调内再利用Clipboard API

当state为granted或prompt，即可调用API

针对Clipboard的权限名紧张有

clipboard-read读操作

clipboard-write写操作

不同浏览器权限名称可能不同

Clipboard.writeText()

用于将纯文本写入剪切板

text为要写入剪切板的纯文本字符串

Clipboard.readText()

用于从剪贴板读取纯文本

text为剪贴板中存储的纯文本字符串

读取到文本后，即可对其进行一些粘贴等的操作

Clipboard.write()

用于将各种数据(如文本、图片、HTML)写入剪贴板

items为包含要写入剪贴板的数据项的数组；每个数据项是一个ClipboardItem工具

创建一个ClipboardItem实例须要传入一个工具，这个工具的键是MIME类型，值是包含数据的Blob工具

ClipboardItem.types属性可获取该剪贴项可用的MIME类型，结果为一个数组ClipboardItem.getType(type)方法可获取剪贴项内对应MIME类型的数据，返回一个Promise工具一个ClipboardItem可以有多个MIME项，如：一个工具有text/html和text/plain两项，表示其既可以粘贴为纯文本，对支持HTML粘贴的，也可以粘贴为富文本

一个复制图片的栗子

Clipboard.read()

用于从剪贴板读取各种数据(如文本、图片、HTML)

items为一个从剪贴板读取的数据项的数组；每个数据项是一个ClipboardItem工具事宜

除了API外，Clipboard API还供应了一些监听事宜，用于监听copy、cut、patse等操作的发生

通过这些事宜，我们可以增强运用的复制、剪切等操作，如：在复制内容后面添加上版权声明或格式化粘贴内容等