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

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

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

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

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

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

✅ 已包含思源原有命令面板命令（即自定义命令 + 思源原有命令），完全可以代替思源命令面板。

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

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

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

快速打开代码

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)来延迟下。

如图下图所示

然后，添加完成后，刷新页面，然后再按 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）。

函数原型

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）。

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

函数原型

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

对话框

一般用于表单提交。

基本对话框

原始对话框

title 也可以不显示

函数原型

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 操作界面。