登录 注册

添加一个顶栏按钮，如何实现点击即打开代码片段界面？

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

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();

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

  • 思源笔记

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

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

    19839 引用 • 76035 回帖
  • Q&A

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

    6897 引用 • 31121 回帖 • 227 关注
7 回帖
4
2
148 85 4 54 1 3

相关帖子

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

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

    settingBtn.addEventListener( 

"click", 

function (e) { 

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

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

    所以 setTimeout 应该写在这里；

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

7 回帖
添加一个顶栏按钮，如何实现点击即打开代码片段界面？

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • niop •
    付费者

    假如你只想通过代码片段来实现,可以用代码模拟点击 siyuan-> 设置-> 外观-> 代码片段来实现.

    也可以用 openapi 实现. fetchPost /api/snippet/getSnippet", 具体代码可参考 siyuan\app\src\config\util\snippets.ts

    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 •
    付费者 支持者 捐赠者 作者

    我首先理解了基础代码，然后再修改到可以正常打开设置界面，之后模拟点击我不会，就用开发者工具找到那个元素，然后：

    我：怎么用 JS 模拟点击按钮：<button class="b3-button b3-button--outline fn__flex-center fn__size200" id="codeSnippet"><svg><use xlink:href="#iconSettings"></use></svg>设置 </button> ？

    GPT：要使用 JavaScript 模拟点击按钮，可以通过以下步骤实现：

    1. 首先，获取对应的按钮元素。在这种情况下，您可以使用按钮的 id 属性来获取该元素。
    var button = document.getElementById('codeSnippet');
    1. 然后，您可以使用 click() 方法来模拟点击按钮。
    button.click();

    整体代码如下：

    var button = document.getElementById('codeSnippet');
button.click();

    这样，当您运行这段 JavaScript 代码时，它将模拟点击具有 id 为 codeSnippet 的按钮。

    我：让这个模拟点击在这段程序的最后阶段执行：

    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
  );
}

    GPT：要在这段程序的最后阶段执行模拟点击按钮的操作，您可以在 addSnippets() 函数的最后调用前面提到的模拟点击按钮的代码。这样可以确保在设置按钮被添加到页面并且事件监听器被设置后再触发点击事件。

    下面是修改后的代码：

    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
  );

  // 模拟点击按钮
  var button = document.getElementById('codeSnippet');
  button.click();
}

    在这个修改后的代码中，addSnippets() 函数会先执行添加设置按钮的操作，然后再执行模拟点击按钮的操作。这样可以确保在设置按钮被添加到页面并且事件监听器被设置后再触发点击事件。

    然后发现界面加载要一点时间，于是就：

    我：我想在前面增加 1s 的延时

    GPT：要在调用按钮点击事件处理程序之前增加 1 秒的延时，您可以使用 setTimeout() 函数来实现。setTimeout() 函数可以在指定的时间间隔后执行指定的函数。

    下面是一个示例代码，演示如何在调用按钮点击事件处理程序之前增加 1 秒的延时：

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

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

// 增加1秒延时后触发按钮的点击事件
setTimeout(function() {
  button.dispatchEvent(clickEvent);
}, 1000); // 1000毫秒 = 1秒

    在这段代码中，setTimeout() 函数会在 1 秒后触发指定的函数，该函数会触发按钮的点击事件处理程序。这样就实现了在调用按钮点击事件处理程序之前增加 1 秒的延时。

    我就自己把代码加上去了。

  • 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 回复
  • Undii • • 1 • 1 评论
    付费者 捐赠者

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

    settingBtn.addEventListener( 

"click", 

function (e) { 

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

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

    所以 setTimeout 应该写在这里；

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

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

    这回我搞懂了，能顺利运行了，谢谢你 😘

请输入回帖内容 ...
JeffreyChen
约等于 SiYuan 的客服、测试，感谢你到爱发电赞赏我的努力：https://afdian.net/a/JeffreyChen
回帖
3503
 帖子
111
 积分
272

近期热议

推荐标签 标签

  • 书籍

    宋真宗赵恒曾经说过：“书中自有黄金屋，书中自有颜如玉。”

    76 引用 • 390 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    141 引用 • 3721 回帖
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    4 引用 • 16 回帖 • 1 关注
  • 安装

    你若安好，便是晴天。

    131 引用 • 1184 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储，专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 496 关注
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 25 关注
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖
  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    379 引用 • 1221 回帖 • 589 关注
  • 负能量

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

    87 引用 • 1206 回帖 • 448 关注
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 614 关注
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 124 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    58 引用 • 22 回帖
  • 音乐

    你听到信仰的声音了么？

    59 引用 • 510 回帖
  • PWL

    组织简介

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

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

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

    有什么新发现就分享给大家吧！

    244 引用 • 1762 回帖
  • 爬虫

    网络爬虫（Spider、Crawler），是一种按照一定的规则，自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • 架构

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

    140 引用 • 441 回帖 • 1 关注
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    942 引用 • 1458 回帖 • 118 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    10 引用 • 88 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 321 关注
  • Sym

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

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

    524 引用 • 4599 回帖 • 692 关注
  • 新人

    让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
    新手上路，请谨慎驾驶！

    51 引用 • 226 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖 • 2 关注
  • 安全

    安全永远都不是一个小问题。

    191 引用 • 813 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 52 关注

最新标签