想做一个好用的在线编辑器,不管是地图编辑器、PPT 创作平台还是通过拖拽快速创建活动页面的编辑器等等,必然要给用户提供各种快捷的操作方法。如非常常用的复制粘贴功能。
举个例子,在 iPresst 创作平台,我们的作品在好几页都要用到同一张图片,总不能每次都点击上传一次图片吧?右键复制粘贴或者直接按快捷键无疑是最符合用户预期的操作方式,然而我们编辑器用到的元素一般比较特别,而且我们复制粘贴的时候经常要做一些特殊处理,此时我们就需要覆盖浏览器给我们提供的复制粘贴功能了。
实现的原理也挺简单:
方法 1:监听键盘事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
document.addEventListener('keydown', function(e){ if(e.ctrlKey) { switch(e.keyCode) { case 88: console.log('Ctrl + X, cutting'); break; case 67: console.log('Ctrl + C, copying'); break; case 86: console.log('Ctrl + V, pasting'); break; default: } } }, false); |
此时我们要覆盖掉浏览器的默认右键菜单,不然快捷键和右键菜单的复制粘贴操作效果不一致。这并不奇怪,一般的稍复杂的编辑器都有定制自己的右键菜单。
1 2 3 4 |
document.addEventListener('contextmenu', function(e){ e.preventDefault(); console.log('show my context menu'); }, false); |
方法 2:直接覆盖剪切复制粘贴事件
1 2 3 4 5 6 7 8 9 10 11 12 |
document.addEventListener('cut', function(e){ e.preventDefault(); console.log('Ctrl + X, cutting'); }, false); document.addEventListener('copy', function(e){ e.preventDefault(); console.log('Ctrl + C, copying' |