登录 注册

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

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

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 引用 • 76036 回帖
  • 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 回帖
添加一个顶栏按钮，如何实现点击即打开代码片段界面？

欢迎来到这里！

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

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

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

    settingBtn.addEventListener( 

"click", 

function (e) { 

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

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

    所以 setTimeout 应该写在这里；

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

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

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

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

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

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

  • 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
约等于 SiYuan 的客服、测试，感谢你到爱发电赞赏我的努力：https://afdian.net/a/JeffreyChen
回帖
3503
 帖子
111
 积分
272

近期热议

推荐标签 标签

  • 创造

    你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！

    175 引用 • 992 回帖
  • 爬虫

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

    106 引用 • 275 回帖
  • 大数据

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

    89 引用 • 113 回帖
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    90 引用 • 383 回帖
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 1 关注
  • Java

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

    3169 引用 • 8208 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug（漏洞）。

    71 引用 • 1736 回帖 • 5 关注
  • Gzip

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

    9 引用 • 12 回帖 • 124 关注
  • 安装

    你若安好，便是晴天。

    131 引用 • 1184 回帖
  • 周末

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

    14 引用 • 297 回帖
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 2 关注
  • BAE

    百度应用引擎（Baidu App Engine）提供了 PHP、Java、Python 的执行环境，以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用，并且提供动态扩容和负载均衡的运行环境，让开发者不用考虑高成本的运维工作，只需专注于业务逻辑，大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 617 关注
  • Lute

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

    25 引用 • 191 回帖 • 25 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 1 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 431 关注
  • 链滴

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

    记录生活，连接点滴

    141 引用 • 3721 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 403 关注
  • 博客

    记录并分享人生的经历。

    272 引用 • 2386 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 610 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 531 关注
  • CentOS

    CentOS（Community Enterprise Operating System）是 Linux 发行版之一，它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码，因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    74 引用 • 157 回帖
  • JSON

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

    51 引用 • 190 回帖 • 1 关注
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    184 引用 • 461 回帖 • 1 关注
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 437 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 701 关注

最新标签