双击全选代码文本
我代码高亮是几年前参考Prism改写的,留有一个遗憾是缺失复制代码文本的功能,因为我一直没有找到理想的交互方式。常见的办法是在右上角放一个常驻或悬停可见的复制按钮,点击后自动将全文复制到剪贴板。我不认可这个设计,一是按钮造成一小块遮挡,二是移动鼠标去找一个按钮进行复制不是很自然的交互,特别是文本较长需要往上回滚的情况下。
我平时习惯双击选中一段文本,按照这个方式增加了双击全选代码文本的功能——仅全选而不自动加入剪贴板,防止误触。
$pre.on('dblclick', () => {
let range = document.createRange(),
selection = window.getSelection();
range.selectNodeContents($pre[0]);
selection.removeAllRanges(); //清除之前的选区
selection.addRange(range); //添加新的选区
});
标签: 建站