wangEditor应该取的是剪切板中html格式数据,这并不是我们想要的。根据产品提醒,禅道的富文本能够粘贴excel数据带图片。通过调试器分析,得知禅道取剪切板中有图片格式数据,转为base64上传到服务器后,使用img引用图片。
现代浏览器基于安全考虑,js 是无法直接读取剪贴板的。
唯一的可能性是,用户在可编辑元素中(如 contenteditable='true'
的 div)主动触发粘贴操作(如,通过 ctrl+V)。此时通过监听 paste 事件, 可以从event中获取到用户所粘贴的内容。
示例代码(支持现代浏览器):
<div id='editableDiv' contenteditable='true'>Paste here</div> function handlePaste (e) {var clipboardData, pastedData
// 阻止粘贴
e.stopPropagation()
e.preventDefault()
// 获取剪贴板信息
clipboardData = e.clipboardData || window.clipboardData
// 获取剪贴板内容,getData 的参数是数据类型,这里为了获取文件路径是 'URL';如果想获取粘贴的文本,用 'Text'
pastedData = clipboardData.getData('URL')
// 处理信息,此时 pastedData 应该是 'file:///path/to/xxx'
alert(pastedData)
}
document.getElementById('editableDiv').addEventListener('paste', handlePaste)
但是,与其费心思这样做,为何不直接做成拖动上传呢,应该更易于使用吧。
示例来源
http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser/2177059#2177059
function copyToClipboard(s){if(window.clipboardData){
window.clipboardData.setData('text',s)
}else{
(function(s){
document.oncopy=function(e){
e.clipboardData.setData('text',s)
e.preventDefault()
document.oncopy=null
}
})(s)
document.execCommand('Copy')
}
} //用法举例:
copyToClipboard("要复制到剪贴板的文字")