登录 注册

[js] 添加一个顶栏按钮，实现点击即打开代码片段界面

最终实现的 JS 代码片段：

/**
 * 在顶栏添加按钮，快捷打开代码片段界面 JS片段
 * 参考 https://ld246.com/article/1674026309504 修改，同时感谢 [Undii](https://ld246.com/member/Undii) 提供 帮助
 * 为顶栏增加代码片段按钮，点击后创建快捷键按下事件
 * 挂件模式支持点击日记列出笔记本。 https://ld246.com/article/1674026309504
 */
// 设置是否添加对应按钮
let g_addSnippets = true;// 设置

// 插入按钮
// 插入日历笔记本选择挂件 
// 参考: https://ld246.com/article/1662969146166  原作者: BryceAndJuly
// 参考: https://github.com/svchord/Rem-Craft 原作者: Seven Chor

function addSnippets() {
  let barMode = document.getElementById("barMode");
  barMode.insertAdjacentHTML(
    "afterend",
    '<div id="barSnippets_simulate" class="toolbar__item ariaLabel" aria-label="代码片段/Snippets"></div>'
  );
  let settingBtn = document.getElementById("barSnippets_simulate");
  settingBtn.innerHTML = `<svg><use xlink:href="#iconCode"></use></svg>`;

  settingBtn.addEventListener(
    "click",
    function (e) {
        dispatchKeyEvent("config");

        setTimeout(function() {
            // 找到包含 data-name="appearance" 的 <li> 元素
            var element = document.querySelector('li[data-name="appearance"]');
  
            // 创建一个点击事件
            var event = new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
            });
  
            // 触发点击事件
            element.dispatchEvent(event);
        }, 100); // 1000毫秒 = 1秒

        setTimeout(function() {
            // 获取按钮元素
            var button = document.getElementById('codeSnippet');
  
            // 创建一个新的点击事件
            var clickEvent = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: true
            });
  
            // 触发按钮的点击事件
            button.dispatchEvent(clickEvent);
  
        }, 200); // 1000毫秒 = 1秒
    }
  );
}


/**
 * 
 */
function dispatchKeyEvent(functionName) {
  let keyInit = parseHotKeyStr(window.top.siyuan.config.keymap.general[functionName].custom);
  keyInit["bubbles"] = true;
  let keydownEvent = new KeyboardEvent('keydown', keyInit);
  document.getElementsByTagName("body")[0].dispatchEvent(keydownEvent);
  let keyUpEvent = new KeyboardEvent('keyup', keyInit);
  document.getElementsByTagName("body")[0].dispatchEvent(keyUpEvent);
}

/**
 * 
 * @param {*} hotkeyStr 思源hotkey格式 Refer: https://github.com/siyuan-note/siyuan/blob/d0f011b1a5b12e5546421f8bd442606bf0b5ad86/app/src/protyle/util/hotKey.ts#L4
 * @returns KeyboardEventInit Refer: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/KeyboardEvent
 */
function parseHotKeyStr(hotkeyStr) {
  let result = {
    ctrlKey: false,
    altKey: false,
    metaKey: false,
    shiftKey: false,
    key: 'A',
    keyCode: 0
  }
  if (hotkeyStr == "" || hotkeyStr == undefined || hotkeyStr == null) {
    console.error("解析快捷键设置失败", hotkeyStr);
    throw new Error("解析快捷键设置失败");
  }
  let onlyKey = hotkeyStr;
  if (hotkeyStr.indexOf("⌘") != -1) {
    result.ctrlKey = true;
    onlyKey = onlyKey.replace("⌘", "");
  }
  if (hotkeyStr.indexOf("⌥") != -1) {
    result.altKey = true;
    onlyKey = onlyKey.replace("⌥", "");
  }
  if (hotkeyStr.indexOf("⇧") != -1) {
    result.shiftKey = true;
    onlyKey = onlyKey.replace("⇧", "");
  }
  // 未处理 windows btn （MetaKey） 
  result.key = onlyKey;
  // 在https://github.com/siyuan-note/siyuan/commit/70acd57c4b4701b973a8ca93fadf6c003b24c789#diff-558f9f531a326d2fd53151e3fc250ac4bd545452ba782b0c7c18765a37a4e2cc
  // 更改中，思源改为使用keyCode判断快捷键按下事件，这里进行了对应的转换
  // 另请参考该提交中涉及的文件
  result.keyCode = keyCodeList[result.key];
  console.assert(result.keyCode != undefined, `keyCode转换错误,key为${result.key}`);
  switch (result.key) {
    case "→": {
      result.key = "ArrowRight";
      break;
    }
    case "←": {
      result.key = "ArrowLeft";
      break;
    }
    case "↑": {
      result.key = "ArrowUp";
      break;
    }
    case "↓": {
      result.key = "ArrowDown";
      break;
    }
    case "⌦": {
      result.key = "Delete";
      break;
    }
    case "⌫": {
      result.key = "Backspace";
      break;
    }
    case "↩": {
      result.key = "Enter";
      break;
    }
  }
  return result;
}

if (g_addSnippets) addSnippets();

const keyCodeList = {
  "⌫": 8,
  "⇥": 9,
  "↩": 13,
  "⇧": 16,
  "⌘": 91,
  "⌥": 18,
  "Pause": 19,
  "CapsLock": 20,
  "Escape": 27,
  " ": 32,
  "PageUp": 33,
  "PageDown": 34,
  "End": 35,
  "Home": 36,
  "←": 37,
  "↑": 38,
  "→": 39,
  "↓": 40,
  "PrintScreen": 44,
  "Insert": 45,
  "⌦": 46,
  "0": 48,
  "1": 49,
  "2": 50,
  "3": 51,
  "4": 52,
  "5": 53,
  "6": 54,
  "7": 55,
  "8": 56,
  "9": 57,
  "A": 65,
  "B": 66,
  "C": 67,
  "D": 68,
  "E": 69,
  "F": 70,
  "G": 71,
  "H": 72,
  "I": 73,
  "J": 74,
  "K": 75,
  "L": 76,
  "M": 77,
  "N": 78,
  "O": 79,
  "P": 80,
  "Q": 81,
  "R": 82,
  "S": 83,
  "T": 84,
  "U": 85,
  "V": 86,
  "W": 87,
  "X": 88,
  "Y": 89,
  "Z": 90,
  "ContextMenu": 93,
  "MyComputer": 182,
  "MyCalculator": 183,
  ";": 186,
  "=": 187,
  ",": 188,
  "-": 189,
  ".": 190,
  "/": 191,
  "`": 192,
  "[": 219,
  "\\": 220,
  "]": 221,
  "'": 222,
  "*": 106,
  "+": 107,
  "-": 109,
  ".": 110,
  "/": 111,
  "F1": 112,
  "F2": 113,
  "F3": 114,
  "F4": 115,
  "F5": 116,
  "F6": 117,
  "F7": 118,
  "F8": 119,
  "F9": 120,
  "F10": 121,
  "F11": 122,
  "F12": 123,
  "NumLock": 144,
  "ScrollLock": 145
};

原贴：

看到个 帖子 ，添加按钮应该是这样：

function addSnippets() {
  let barMode = document.getElementById("barMode");
  barMode.insertAdjacentHTML(
    "afterend",
    '<div id="barSnippets_simulate" class="toolbar__item ariaLabel" aria-label="代码片段/Snippets" ></div>'
  );
  let settingBtn = document.getElementById("barSnippets_simulate");
  settingBtn.innerHTML = `<svg><use xlink:href="#iconCode"></use></svg>`;

  settingBtn.addEventListener("click", function() {
      openSnippets();
    }, false);
}

function openSnippets() {

}

addSnippets();

但是我不知道怎么打开代码片段界面

  • 思源笔记

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

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

    22340 引用 • 89394 回帖 • 1 关注
  • 代码片段

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

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

    69 引用 • 372 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    8113 引用 • 37006 回帖 • 160 关注
1 引用
有没有办法把代码片段设置做成一个按钮放在侧边栏？ • JeffreyChen
1 操作
JeffreyChen 在 2024-10-04 17:26:37 更新了该帖
50 悬赏
1 感谢
1 引用
1 操作
9 回帖
4
2
324 170 4 143 3 3

相关帖子

被采纳的回答
  • Undii • • 1
    付费者 捐赠者

    主要是 模拟点击应该在 点击顶栏按钮、并且打开设置页之后进行
    你这里的 setTimeout 并没有和点击顶栏按钮关联起来，也就是，“延迟模拟点击打开代码片段”，这个事情之会在代码生效时执行一次。在 4 秒内打开了设置，这里代码就会正确执行一次。

    settingBtn.addEventListener( 

"click", 

function (e) { 

dispatchKeyEvent("config");
// setTimeout写在这里
 } );

    上面的代码，是将 click 点击顶栏按钮的事件和 function 关联了起来，具体的，这里执行了 dispatchKeyEvent 来模拟快捷键打开设置页面，

    所以 setTimeout 应该写在这里；

    我也在原帖中更新了相应的代码。

9 回帖
[js] 添加一个顶栏按钮，实现点击即打开代码片段界面

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Undii • • 1 • 1 评论
    付费者 捐赠者

    主要是 模拟点击应该在 点击顶栏按钮、并且打开设置页之后进行
    你这里的 setTimeout 并没有和点击顶栏按钮关联起来，也就是，“延迟模拟点击打开代码片段”，这个事情之会在代码生效时执行一次。在 4 秒内打开了设置，这里代码就会正确执行一次。

    settingBtn.addEventListener( 

"click", 

function (e) { 

dispatchKeyEvent("config");
// setTimeout写在这里
 } );

    上面的代码，是将 click 点击顶栏按钮的事件和 function 关联了起来，具体的，这里执行了 dispatchKeyEvent 来模拟快捷键打开设置页面，

    所以 setTimeout 应该写在这里；

    我也在原帖中更新了相应的代码。

    1 回复
    用 api 的话 返回的是代码片段的内容 需要自己写一个 dialog 显示 这个最好用插件做。
    Undii •
  • 其他回帖
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    我让 GPT 改了一下，成功了一次，然后就一直都不行了。我不太理解：

    回帖不能超过 4000 字，完整代码：顶栏按钮.zip

    function addSnippets() {
  let barMode = document.getElementById("barMode");
  barMode.insertAdjacentHTML(
    "afterend",
    '<div id="barSnippets_simulate" class="toolbar__item ariaLabel" aria-label="代码片段/Snippets"></div>'
  );
  let settingBtn = document.getElementById("barSnippets_simulate");
  settingBtn.innerHTML = `<svg><use xlink:href="#iconCode"></use></svg>`;

  settingBtn.addEventListener(
    "click",
    function (e) {
      dispatchKeyEvent("config");
    }
  );

  setTimeout(function() {
    // 找到包含 data-name="appearance" 的 <li> 元素
    var element = document.querySelector('li[data-name="appearance"]');
  
    // 创建一个点击事件
    var event = new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window
    });
  
    // 触发点击事件
    element.dispatchEvent(event);
  }, 4000); // 4000毫秒 = 4秒

  setTimeout(function() {
    // 获取按钮元素
    var button = document.getElementById('codeSnippet');
  
    // 创建一个新的点击事件
    var clickEvent = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true
    });
  
    // 触发按钮的点击事件
    button.dispatchEvent(clickEvent);
  
  }, 4000); // 4000毫秒 = 4秒
}
    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    首先我没学过编程，只是看过一些代码。

    刚开始我是想通过点击这个顶栏按钮「创建快捷键按下事件」打开设置界面，然后模拟点击 外观 > 代码片段设置 ，但我不会编程，只能拿 GPT 改，能打开设置界面，但没法点击，我也不会修（跟模拟点击相关的代码附在后面）。

    然后就想到看看是不是通过什么请求打开的代码片段界面，看到了 api/snippet/getSnippet ，然后就去仓库搜，搜到了我感觉可能跟打开界面有关的 代码 ，但我看不懂，只能试试 把 ts 转为 js 之后粘贴到之前的代码里试试，果然没法直接运行。然而我也不知道怎么搞这个 POST 请求 ，请求了也不知道怎么用。

    最后我就无能为力了。

    image.png

    /**
 * 为顶栏增加代码片段按钮，点击后创建快捷键按下事件
 * 挂件模式支持点击日记列出笔记本。 https://ld246.com/article/1674026309504
 */
// 设置是否添加对应按钮
let g_addSnippets = true;// 设置

function addSnippets() {
  let barMode = document.getElementById("barMode");
  barMode.insertAdjacentHTML(
    "afterend",
    '<div id="barSnippets_simulate" class="toolbar__item ariaLabel" aria-label="代码片段/Snippets" ></div>'
  );
  let settingBtn = document.getElementById("barSnippets_simulate");
  settingBtn.innerHTML = `<svg><use xlink:href="#iconCode"></use></svg>`;

  settingBtn.addEventListener(
    "click",
    function (e) {
      dispatchKeyEvent("config");
    },
    false
  );

  setTimeout(function() {
  // 找到包含 data-name="appearance" 的 <li> 元素
  var element = document.querySelector('li[data-name="appearance"]');

  // 创建一个点击事件
  var event = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  });

  // 触发点击事件
  element.dispatchEvent(event);
}, 2000); // 1000毫秒 = 1秒

  setTimeout(function() {
  // 模拟点击代码片段设置按钮
  // var button = document.getElementById('codeSnippet');
  // button.click();

  // 获取按钮元素
  var button = document.getElementById('codeSnippet');

  // 创建一个新的点击事件
  var clickEvent = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });

  // 触发按钮的点击事件
  button.dispatchEvent(clickEvent);

  }, 2000); // 1000毫秒 = 1秒
}
    1 回复
  • Undii •
    付费者 捐赠者

    两个 setTimeout 的位置错了，应该放在 dispatchKeyEvent("config"); 之后；

    我没想过 GPT 还能做这个；这是怎么给 GPT 说的呢？

    setTimeout 延迟两秒似乎也不需要，能更快，设置几百应该就行；

    2 回复
  • 查看全部回帖
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器，而不是 Markdown 文件编辑器； 思源笔记同步教程：ld246.com/article/1692089679062
回帖
5939
 帖子
130
 积分
4311

近期热议

推荐标签 标签

  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 384 回帖 • 8 关注
  • CSDN

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

    14 引用 • 155 回帖
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织，“用爱发电”象征开源与贡献精神，加入组织，代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入：用爱发电组织邀请帖。
    用爱发电组织官网：https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力：

    • 遵守开源守则，体现开源&贡献精神：以分享为目的，拒绝非法牟利。
    • 自我保护：使用适当的 License 保护自己的原创作品。
    • 尊重他人：不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露；以礼相待，尊重所有对社区做出贡献的开发者；通过他人的分享习得知识，要留下足迹，表示感谢。
    • 热爱编程、热爱学习：加入组织，热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友，也同样欢迎默默成就的朋友。
    • 倾听：正确并恳切对待、处理问题与建议，及时修复开源项目的 Bug ，及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视：不诋毁、轻视、嘲讽其他开发者，主动提出建议、施以帮助，以和谐为本。只要他人肯努力，你也可能会被昔日小看的人所超越，所以请保持谦虚。
    • 乐观且活跃：你的努力决定了你的高度。不要放弃，多年后回头俯瞰，才会发现自己已经成就往日所仰望的水平。积极地将项目开源，帮助他人学习、改进，自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖
  • Spark

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

    74 引用 • 46 回帖 • 552 关注
  • abitmean

    有点意思就行了

    • 29 关注
  • 导航

    各种网址链接、内容导航。

    40 引用 • 173 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 167 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 618 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 477 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖
  • jQuery

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

    63 引用 • 134 回帖 • 724 关注
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 114 关注
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 51 关注
  • 大数据

    大数据（big data）是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • CAP

    CAP 指的是在一个分布式系统中， Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性），三者不可兼得。

    11 引用 • 5 回帖 • 607 关注
  • B3log

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

    1063 引用 • 3453 回帖 • 203 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 463 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 672 关注
  • JWT

    JWT（JSON Web Token）是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准（RFC 7519），定义了一种简洁的，自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 3 关注
  • LeetCode

    LeetCode（力扣）是一个全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 Dream Offer！

    209 引用 • 72 回帖
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 71 关注
  • OpenShift

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

    14 引用 • 20 回帖 • 633 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 681 关注
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖

最新标签