在最新的H5 API里已经有了对粘贴事件的支持, 事件名为paste, 平时用的较少,但最近想做一个粘贴板管理器,于是就调研了一下这个粘贴,复制事件.
那么调研的第一步是什么那?
当然是百度了,但高手都不百度,直接控制台调试
创建一个id为editor的文本域, 为其添加一个paste事件的监听
<textarea id="editor"></textarea>
<script>
document.querySelector('#editor').addEventListener('paste', function(even) {
console.log(even)
})
</script>控制台打印出来是这样的
处理函数的参数是even,even的数据结构如上图
明眼人一眼就能看出那个数据自己有用,其他几个属性稀松平常,唯独clipboardData这个属性比较 特殊,这是一个DataTransfer类型的数据.估计我们需要的粘贴对象就存储在这个clipboardData这个属性里面
果不其然,查阅资料后我得知,
DataTransfer这个数据类型的相关资料,尽管第一次接触这个类型,但还是很快能找到自己想要的,所以,知识的搜索能力对于一个人的成长必不可少.
如下:
The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. For more information about drag and drop, see HTML Drag and Drop API.
This object is available from the dataTransfer property of all drag events.
Properties
DataTransfer.dropEffect
Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be none, copy, link or move.
DataTransfer.effectAllowed
Provides all of the types of operations that are possible. Must be one of none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized.
DataTransfer.files
Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.
DataTransfer.items Read only
Gives a DataTransferItemList object which is a list of all of the drag data.
DataTransfer.types Read only
An array of strings giving the formats that were set in the dragstart event.
Methods
Standard methods
DataTransfer.clearData()
Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.
DataTransfer.getData()
Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.
DataTransfer.setData()
Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.
DataTransfer.setDragImage()
Set the image to be used for dragging if a custom one is desired.
使用getData()方法我们可以获取自己想要的粘贴元数据,如果粘贴对象是文本,html的话可以这样获取参数,但对于文件,比如一个截图后,那么这是就要使用even.clipboardData.files 来获取了,这里获取的是一个文件列表. 可以直接上传到服务器,不过要想在Chrome中预览你的截图,那就需要使用另外一个类了,FileReader
根据这个DataTransfer类的解释我们不难得出,这个东西主要是用于drop drag两个事件里多用
以下这个是文本粘贴的数据 可以使用even.clipboardData.getDate('text/plain') 获取粘贴的数据
完整代码.复制截图到富文本编译域里
<!DOCTYPE html>
<html>
<head>
<title>富文本编辑器</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="edit-wrap">
<div id="editor" contenteditable="true" class="edit-textarea" ></div>
<img id="myimg" src=""/>
<script>
document.querySelector('#editor').addEventListener('paste', function(even,value){
console.log(even.clipboardData.files)
let file = even.clipboardData.files[0]
let fileReader = new FileReader(); // 文件解读器
fileReader.onloadend = function() {
document.querySelector('#myimg').src = fileReader.result // 将读取后的base64
}
fileReader.onerror = function(err) {
console.log(err)
}
fileReader.readAsDataURL(file) // 读取一个文件返回base64地址
})
</script>
</body>
</html>