[js] 这个功能可以封神!openAny 教程之快速打开(可自定义的命令面板)

不知不觉,openAny 又迎来了几个版本更新,目前是 0.0.5。

增加 toolbar 出现事件;改进事件传递机制,默认捕获阶段触发;增加鼠标监听和模拟事件(包括鼠标左中右按键,鼠标 + 按键,甚至 mouseover 事件等,从此貌似任何手动操作的功能都可以代码执行了);增加与本地文件的交互等;setKeymap 更改为 addKeymap;新增 removeKeymap; 增加输入框,选项菜单,弹出窗三大常用 UI 等。

[js] 连续点击 openAny,小代码,大作用,让一切触手可达


众所周知,思源的命令太过简陋,用惯 ob 命令的用户,总觉得需要什么功能从菜单中扒,从各种界面中太不效率了。因此,开发了上面的 openAny 基础操作,虽然很灵活,但对于没有编程基础的同学来说,还是不太会用。

为了写一个实用主义的教程,我用 openAny 开发了这个工具,类似于思源自带的命令面板,但具体的菜单内容可以自定义,任何你想要的功能都可以加进来。有打算用 openAny 开发点什么的同学也可以参考这里的代码。

已包含思源原有命令面板命令(即自定义命令 + 思源原有命令),完全可以代替思源命令面板。

image.png

r123.gif

搜索支持拼音及拼音首字母,空格代表 AND,也可以用 OR 隔开,代表或。

上下方向键可移动焦点,回车执行选中项。

任何时候按 ctrl/meta + ; 打开该窗口。 也可以再脚本的第二个参数里设置按键。

image.png

快速打开代码

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%BF%AB%E9%80%9F%E6%89%93%E5%BC%80%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83%BD.js

使用方法

首先安装 openAny 代码片段,地址见本文最上方的链接。

然后,再把该快速打开的代码放到代码片段中或 runjs 中即可。

放到代码片段中

放到代码片段中较简单,把代码放进去后,只需要在代码的“自定义菜单区 开始”区和“自定义菜单区 结束”区直接按照代码中的例子添加或修改菜单即可。

一般保存完即可生效,但如果修改的是按键需要刷新下页面才行。

放到 runjs 中

第一步,按照 runjs 插件

第二步,在任意文档新建 js 代码块

第三步,给上面的代码块命名,比如叫 quickOpen

第四步,在刚才的代码块上右键选择,插件->runjs-> 保存为可调用方法

第五步,打开思源代码片段,新建代码片段,输入以下 js 即可,这样就能在页面加载时执行刚才的代码块里的代码了。

runJs.plugin.call('quickOpen')

第六步,在你刚才新建的代码块中修改或添加新菜单即可。

修改完后,只需要在代码块上按 alt+f5 重新执行代码块中的代码即可。

如果修改的是按键,还是需要刷新下的,不然会有两个按键被监听。

runjs 的好处是可以随时随地在思源代码块中修改代码,代码支持高亮修改起来更方便。改完代码,只要不是改的按键,直接 alt+f5 执行下,新添加的代码就生效了。

如何添加新菜单

基本的安装完成后,让我们研究下,如何新增菜单项。

从源码中可以看到,我这里并没有采用传统的配置参数来进行,而是添加菜单直接用 addMenu 函数来完成。原因是,即使是配置参数,也需要在参数里增加回调函数,如果回调函数很多且长,也会造成混乱,反而不是现在这样简单清晰。

首先,增加菜单项,只需要添加一个如下代码的调用即可。

addMenu('这里天菜单名', (event, {}) => { // your code });

这里,通常你只需要填两项内容,菜单名和你的代码,在代码区域就可以用 openAny 做各种操作了。

注意,弹出菜单可能使编辑器失去焦点,有些操作可能需要编辑器聚焦才有效,如果有问题,可以试试用 setTimeout(()=>{},0)来延迟下。

如图下图所示

image.png

然后,添加完成后,刷新页面,然后再按 ctrl/meta+; 就可以在快速打开窗口看到你刚才添加的菜单项了

代码中的菜单添加顺序即菜单显示的顺序。

你也许注意到了,这里第三个参数的 M,B,D 是什么?这个一般是当菜单出现时,按这个字母,则迅速选中该项并执行该菜单。

不过,由于快速打开窗口,默认焦点在输入框上,所以,默认情况下,你按字母,则该字母变成了搜索关键词。

所以,需要按下 tab 移走输入框焦点即可。

addMenu 的第三个参数可以添加这个值。

实际上 addMenu 还有第四个参数,第四个参数代表快捷键,如果你的命令设置了快捷键,可以把快捷键通过添加进来,会在菜单的右侧显示快捷键。

所以,addMenu 函数的完整格式是:

addMenu('这里天菜单名', (event, functions, option, selection) => { // your code }, '字母', '快捷键');

这里回调参数里的 event, functions, option, selection,分别代表点击事件,可用的函数列表,当先选中项信息,和选中文本信息。

openAny 的三大 UI

既然是教程,那说说 openAny 里的三大 UI 吧。

输入框

适用于简单输入(类似 quickadd 的 inputPrompt)。

image.png

image.png

函数原型

showInputBox(defaultText = '', title = '', placeholder = '', lines = 1, enterSubmit = true)

调用示例

// 使用示例 const result = await openAny.fn.showInputBox('默认内容'); if (result !== null) { console.log('用户输入:', result); alert(`提交内容: ${result}`); } else { console.log('用户取消了输入'); }

选项菜单

适用于选择指定项,目前不支持多选(类似 quickadd 的 suggester)。

image.png

上面快速打开窗口就是这个选项菜单通过配置参数显示的效果。

函数原型

showOptionsMenu(options, config = {}, selectedIndex)

调用示例

async function demo() { const options = [ { label: '选项 1', value: 'value1', key: 'a', pinyin: '', pinyinFirst: '', callback: () => {} }, { label: '选项 2', value: 'value2', key: 'b', pinyin: '', pinyinFirst: '', callback: () => {} }, { label: '选项 3', value: 'value3', key: 'c', pinyin: '', pinyinFirst: '', callback: () => {} } ]; const selectedOption = await showOptionsMenu(options); if (selectedOption === null) { console.log('用户取消了选择'); } else { console.log(`用户选择了:${selectedOption.value}`); } }

对话框

一般用于表单提交。

基本对话框

image.png

原始对话框

image.png

title 也可以不显示

image.png

函数原型

  1. 原始对话框:
    showDialog(options={})
    options 参数:

    options = { title?: string, content: string, transparent?: boolean, width?: string, height?: string, left?: string, top?: string, destroyCallback?: (options?: IObject) => void, disableClose?: boolean, hideCloseIcon?: boolean, disableAnimation?: boolean, containerClassName?: string, }
  2. 基础对话框:

    showBasicDialog(options = {})

    options 参数:

    options = { ...options, showAction?: boolean, // 当点击确定后不想关闭对话框时,可设置为options.disableClose=true;即可 confirmCallback?: (options?: IObject) => void }

调用示例

openAny.fn.showDialog({title:'demo1', content:'hello'})

打赏作者

超过 20 打赏,考虑开发 UI 操作界面。

  • 思源笔记

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

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

    25342 引用 • 104662 回帖 • 1 关注
  • 代码片段

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

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

    159 引用 • 1027 回帖 • 1 关注
4 操作
wilsons 在 2025-04-25 13:12:28 更新了该帖
wilsons 在 2025-04-25 12:02:17 更新了该帖
wilsons 在 2025-04-25 07:35:55 更新了该帖
wilsons 在 2025-04-25 07:08:40 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Wetoria 1 赞同 via macOS

    你开发个插件吧 😂

  • stevehfut 1 赞同

    期待 wilsons 工具箱久矣 😋

    (js 代码不方便后续更新)

  • 你可以写个插件把你的能力都加到思源本体的命令面板比较好呀,交互也能统一,标准化一点。

    2 回复
  • wilsons

    @Wetoria @stevehfut

    感谢二位大佬的建议,有道理,尤其是涉及复杂功能或较多配置的还是插件方便。

  • wilsons

    有道理,这个我也想过,只是刚开始没想这么多,就想加几个快捷选项。

    后来越来越多,才发现需要搜索,滚动,啥的,等差不多了才猛然发现这不是命令面板自定义版吗?

    可这时基本已经完工,感觉也基本够用了,再移植反而麻烦,所以。。。。

  • 大佬,求插件!!!

    1 回复
  • wilsons

    暂时不会,后面会考虑,把比较受欢迎的几个代码先封装成插件。

  • wilsons

    更新至 0.0.2 版

    0.02 ✅ 已包含思源原有命令面板命令(即自定义命令 + 思源原有命令),完全可以代替思源命令面板。

    注意:需要把 openAny 代码片段更新至最新版,即 openAny v0.0.5 版。

    比思源命令面板好用的地方是可以用拼音搜索和支持自定义命令。

  • 5kyfkr 1 赞同

    期待巨佬搞个工具箱,论坛里贡献的代码片段少说几十个了

  • wilsons

    ❤️ 感谢匿名大佬的大额打赏!🙏 不知道为啥没有来自,暂且认为是最后一个给我点赞的那个大佬吧。

    ❤️ 也感谢所有最近以来打赏的大佬们!

    后面新功能功能复杂的话的尽量用插件吧!这样大家使用更方便!也是众望所归。

请输入回帖内容 ...