登录 注册

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

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

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

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

  • 思源笔记

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

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

    19544 引用 • 74329 回帖 • 2 关注
  • Q&A

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

    6807 引用 • 30635 回帖 • 242 关注
7 回帖
4
2
138 85 4 44 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 •
    付费者 支持者 捐赠者 作者

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

  • Undii •
    付费者 捐赠者

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

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

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

    2 回复
  • 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 回复
  • 查看全部回帖
JeffreyChen
人生是一场无限游戏
回帖
3109
 帖子
109
 积分
675

近期热议

推荐标签 标签

  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    53 引用 • 85 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    22 引用 • 31 回帖 • 9 关注
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 361 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    116 引用 • 99 回帖 • 262 关注
  • Spring

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

    941 引用 • 1458 回帖 • 127 关注
  • 宕机

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

    13 引用 • 82 回帖 • 38 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 1 关注
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    69 引用 • 190 回帖 • 492 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用，支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    16 引用 • 7 回帖 • 1 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    492 引用 • 1385 回帖 • 348 关注
  • 思源笔记

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

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

    19544 引用 • 74329 回帖 • 2 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务，是 Google 的 Chubby 一个开源的实现，是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 16 关注
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 335 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 517 关注
  • 心情

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

    59 引用 • 369 回帖 • 4 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    228 引用 • 1450 回帖 • 1 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    401 引用 • 3501 回帖
  • Dubbo

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

    60 引用 • 82 回帖 • 613 关注
  • TensorFlow

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

    20 引用 • 19 回帖 • 2 关注
  • IDEA

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

    180 引用 • 400 回帖 • 2 关注
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 113 关注
  • BAE

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

    19 引用 • 75 回帖 • 618 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖 • 17 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    19 引用 • 31 回帖 • 2 关注
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 448 关注

最新标签