不知不觉,openAny 又迎来了几个版本更新,目前是 0.0.5。
增加 toolbar 出现事件;改进事件传递机制,默认捕获阶段触发;增加鼠标监听和模拟事件(包括鼠标左中右按键,鼠标 + 按键,甚至 mouseover 事件等,从此貌似任何手动操作的功能都可以代码执行了);增加与本地文件的交互等;setKeymap 更改为 addKeymap;新增 removeKeymap; 增加输入框,选项菜单,弹出窗三大常用 UI 等。
[js] 连续点击 openAny,小代码,大作用,让一切触手可达
众所周知,思源的命令太过简陋,用惯 ob 命令的用户,总觉得需要什么功能从菜单中扒,从各种界面中太不效率了。因此,开发了上面的 openAny 基础操作,虽然很灵活,但对于没有编程基础的同学来说,还是不太会用。
为了写一个实用主义的教程,我用 openAny 开发了这个工具,类似于思源自带的命令面板,但具体的菜单内容可以自定义,任何你想要的功能都可以加进来。有打算用 openAny 开发点什么的同学也可以参考这里的代码。
✅ 已包含思源原有命令面板命令(即自定义命令 + 思源原有命令),完全可以代替思源命令面板。
搜索支持拼音及拼音首字母,空格代表 AND,也可以用 OR 隔开,代表或。
上下方向键可移动焦点,回车执行选中项。
任何时候按 ctrl/meta + ; 打开该窗口。 也可以再脚本的第二个参数里设置按键。
快速打开代码
使用方法
首先安装 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 也可以不显示
函数原型
-
原始对话框:
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, }
-
基础对话框:
showBasicDialog(options = {})
options 参数:
options = { ...options, showAction?: boolean, // 当点击确定后不想关闭对话框时,可设置为options.disableClose=true;即可 confirmCallback?: (options?: IObject) => void }
调用示例
openAny.fn.showDialog({title:'demo1', content:'hello'})
打赏作者
超过 20 打赏,考虑开发 UI 操作界面。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于