UEditor 修改 shCore.js 源码(SyntaxHighlighter)实现改双击为三击触发代码块全选
[編輯] [转简体] (简体译文)
|
作者:huidong
| 分類:【編程】HTML/JavaScript
[
50 瀏覽
0 評論
6 贊
8 踩
]
概要
正文
ueditor 配了一个代码高亮的第三方库(SyntaxHighlighter),显示代码高亮的 HTML 块在被双击的情况下会被全选。但是一般双击只是选择一个单词,我希望它三击才被全选,因此我改了一下。
在 shCore.js 中有这一行代码
attachEvent(findElement(div, '.code'), 'dblclick', quickCodeHandler);
正是它绑定了双击事件
js 没有现成的三击事件,所以要自己写个处理函数,捕获单击事件进行处理。于是改成
attachEvent(findElement(div, '.code'), 'click', handleClick);
再写 handleClick 函数的实现
// 三击事件的处理函数 function tripleClickHandler(event) { console.log('三击事件触发!'); quickCodeHandler(event); // 调用原处理函数 } // 点击事件的监听函数 function handleClick(event) { if (typeof handleClick.clickInfo == 'undefined') { // 用于存储点击次数和时间的对象 handleClick.clickInfo = { count: 0, timer: null }; } // 增加点击次数 handleClick.clickInfo.count++; console.log(handleClick.clickInfo.count); // 如果点击次数达到3次 if (handleClick.clickInfo.count === 3) { handleClick.clickInfo.count = 0; clearTimeout(handleClick.clickInfo.timer); handleClick.clickInfo.timer = null; // 触发三击事件处理函数 tripleClickHandler(event); } else { // 设置一个定时器来重置点击次数(如果点击间隔太长) handleClick.clickInfo.timer = setTimeout(() => { handleClick.clickInfo.count = 0; handleClick.clickInfo.timer = null; }, 400); // 400 毫秒 } }
注意,这里用了 handleClick.clickInfo 来存储点击信息。这是利用函数本身的属性来存储数据,以达到 C 语言中静态变量的效果。
这篇文章还列举了一些其他方法:https://www.delftstack.com/zh/howto/javascript/javascript-static-variables/