[js] 替换原始 跳转到开头和末尾 快捷键效果

操作&效果

原有效果: 不管光标在哪里, 使用 ctrl+homnectrl+end 都是跳转到整个文档的开头和结尾

修改后效果:

  1. 当光标在代码块中间的时候, 使用 ctrl+homnectrl+end 跳转到代码块的开头和结尾
  2. 当光标在代码块开头和结尾的时候, 跳转到整个文档的开头和结尾
  3. 当光标在非代码块的时候, 跳转到整个文档的开头和结尾

js 代码

(()=>{
// 获取光标所在的元素
function getElementAtCursor() {
    const selection = window.getSelection();

    if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        const startContainer = range.startContainer;

        // 如果是文本节点,获取其父元素
        const element = startContainer.nodeType === 3 ? startContainer.parentNode : startContainer;
        return element;
    }

    return null; // 如果没有选中内容或光标位置无效
}
// 当前块是否是代码块
function getCodeBlockDfs(ele) {
    if (ele.classList.contains('protyle-wysiwyg')) {
        return null
    }
    if (ele.classList.contains('hljs')) {
        return ele
    }
    return getCodeBlockDfs(ele.parentElement)
}

async function handle_goto_home(event, element) {
    if (!element) {
        return;
    }
    element = getCodeBlockDfs(element)
    if (element == null) {
        console.log("[跳转开头] 所在位置不是代码块, 使用默认功能")
        return;
    }
    // 找到代码块的第一个子元素, 用于判断
    let firstChild = element.querySelector('[contenteditable="true"]')?.firstChild
    if (firstChild == null) {
        console.log("[跳转开头] 子元素寻找失败, 使用默认功能")
        return;
    }
  
    // 获取当前的 Selection 对象
    const selection = window.getSelection();
    // 获取选择的范围
    const range = selection.getRangeAt(0);
    // 判断光标是否在第一个子元素的开头
    if (range.startContainer !== firstChild || range.startOffset !== 0) {
        if (range.startContainer !== firstChild) {
            console.log("[跳转开头] 不在第一个子元素附近, 功能生效")
        }
        else if (range.startOffset !== 0) {
            console.log("[跳转开头] 不在第一个子元素的开头, 功能生效")
        }
        event.preventDefault(); // 防止快捷键默认行为
        event.stopPropagation();  // 停止事件传播
        // 如果不在,移动到最前面
        range.selectNodeContents(firstChild);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);
    }
    else {
        console.log("[跳转开头] 已经在最开头了, 使用默认功能")
    }
}
async function handle_goto_end(event, element) {
    if (!element) {
        return;
    }
    element = getCodeBlockDfs(element)
    if (element == null) {
        console.log("[跳转末尾] 所在位置不是代码块, 使用默认功能")
        return;
    }
    // 找到代码块的第一个子元素, 用于判断
    let lastChild = element.querySelector('[contenteditable="true"]')?.lastChild
    if (lastChild == null) {
        console.log("[跳转末尾] 子元素寻找失败, 使用默认功能")
        return;
    }
  
    // 获取当前的 Selection 对象
    const selection = window.getSelection();
    // 获取选择的范围
    const range = selection.getRangeAt(0);
    // 判断光标是否在第一个子元素的开头
    if (range.startContainer !== lastChild || range.startOffset !== lastChild.textContent.length) {
        if (range.startContainer !== lastChild) {
            console.log("[跳转末尾] 不在最后一个子元素附近, 功能生效")
        }
        else if (range.startOffset !== lastChild.textContent.length) {
            console.log("[跳转末尾] 不在最后一个子元素的末尾, 功能生效")
        }
        event.preventDefault(); // 防止快捷键默认行为
        event.stopPropagation();  // 停止事件传播
        // 如果不在,移动到最前面
        range.selectNodeContents(lastChild);
        range.collapse(false);
        selection.removeAllRanges();
        selection.addRange(range);
    }
    else {
        console.log("[跳转末尾] 已经在代码块最末尾了, 使用默认功能")
    }
}

// 事件监听
document.addEventListener('keydown', async (event) => {
    let element = getElementAtCursor();
    // event.preventDefault(); // 防止快捷键默认行为
    // event.stopPropagation();  // 停止事件传播
    if (event.ctrlKey && !event.shiftKey && !event.altKey && event.key.toLowerCase() === 'home') {
        // 判断是否需要处理 跳转到代码块开头, 并处理
        handle_goto_home(event, element);
    }
    else if (event.ctrlKey && !event.shiftKey && !event.altKey && event.key.toLowerCase() === 'end') {
        // 判断是否需要处理 跳转到代码块末尾, 并处理
        handle_goto_end(event, element);
    }
});

})()

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22586 引用 • 90655 回帖 • 1 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    74 引用 • 386 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 你的代码风格变了,拥抱驼峰风格了。

    1 回复
  • EmberSky

    有没有一种可能, 这是 ai 写的

    我还是喜欢下划线, 看着直观, 但是 ai 生成的 js 代码, 都是驼峰, 我懒得改了

    所以现在是两种混在一起

    1 回复
  • 😄 下划线我看着眼花,貌似驼峰更流行。

    1 回复
  • EmberSky

    巧了, 驼峰看的我眼花

    1 回复
  • wilsons 1 赞同

    trollface 嗯,都是不习惯的缘故,看习惯就好了,我以前也经常用蛇形风格,自从用了驼峰,蛇形不习惯了。

EmberSky
如果感觉我的回答对你有帮助, 请点击 感谢 支持一下, 谢谢! 杭州

推荐标签 标签

  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 722 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 620 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 745 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 699 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖 • 1 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 408 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖 • 1 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 24 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 609 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 412 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3453 回帖 • 200 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3187 引用 • 8214 回帖
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1434 引用 • 10055 回帖 • 488 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    190 引用 • 1057 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 561 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 631 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    5 引用 • 107 回帖 • 2 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 546 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖 • 1 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖