杜郎俊赏 - dujun.io

双击全选代码文本

我代码高亮是几年前参考Prism改写的,留有一个遗憾是缺失复制代码文本的功能,因为我一直没有找到理想的交互方式。常见的办法是在右上角放一个常驻或悬停可见的复制按钮,点击后自动将全文复制到剪贴板。我不认可这个设计,一是按钮造成一小块遮挡,二是移动鼠标去找一个按钮进行复制不是很自然的交互,特别是文本较长需要往上回滚的情况下。

我平时习惯双击选中一段文本,按照这个方式增加了双击全选代码文本的功能——仅全选而不自动加入剪贴板,防止误触。

$pre.on('dblclick', () => {
    let range = document.createRange(),
        selection = window.getSelection();

    range.selectNodeContents($pre[0]);
    selection.removeAllRanges(); //清除之前的选区
    selection.addRange(range); //添加新的选区
});

标签: 建站
日期:2024-09-26