最终实现的 JS 代码片段：
/**
* 在顶栏添加按钮，快捷打开代码片段界面 JS片段
* 参考 https://ld246.com/article/1674026309504 修改，同时感谢 [Undii](https://ld246.com/member/Undii) 提供 帮助
* 为顶栏增加代码片段按钮，点击后创建快捷键按下事件
* 挂件模式支持点击日记列出笔记本。 https://ld246.com/article/1674026309504
*/
// 设置是否添加对应按钮
let g_addSnippets = true;// 设置
// 插入按钮
// 插入日历笔记本选择挂件
// 参考: https://ld246.com/article/1662969146166 原作者: BryceAndJuly
// 参考: https://github.com/svchord/Rem-Craft 原作者: Seven Chor
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");
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);
}, 100); // 1000毫秒 = 1秒
setTimeout(function() {
// 获取按钮元素
var button = document.getElementById('codeSnippet');
// 创建一个新的点击事件
var clickEvent = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
// 触发按钮的点击事件
button.dispatchEvent(clickEvent);
}, 200); // 1000毫秒 = 1秒
}
);
}
/**
*
*/
function dispatchKeyEvent(functionName) {
let keyInit = parseHotKeyStr(window.top.siyuan.config.keymap.general[functionName].custom);
keyInit["bubbles"] = true;
let keydownEvent = new KeyboardEvent('keydown', keyInit);
document.getElementsByTagName("body")[0].dispatchEvent(keydownEvent);
let keyUpEvent = new KeyboardEvent('keyup', keyInit);
document.getElementsByTagName("body")[0].dispatchEvent(keyUpEvent);
}
/**
*
* @param {*} hotkeyStr 思源hotkey格式 Refer: https://github.com/siyuan-note/siyuan/blob/d0f011b1a5b12e5546421f8bd442606bf0b5ad86/app/src/protyle/util/hotKey.ts#L4
* @returns KeyboardEventInit Refer: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/KeyboardEvent
*/
function parseHotKeyStr(hotkeyStr) {
let result = {
ctrlKey: false,
altKey: false,
metaKey: false,
shiftKey: false,
key: 'A',
keyCode: 0
}
if (hotkeyStr == "" || hotkeyStr == undefined || hotkeyStr == null) {
console.error("解析快捷键设置失败", hotkeyStr);
throw new Error("解析快捷键设置失败");
}
let onlyKey = hotkeyStr;
if (hotkeyStr.indexOf("⌘") != -1) {
result.ctrlKey = true;
onlyKey = onlyKey.replace("⌘", "");
}
if (hotkeyStr.indexOf("⌥") != -1) {
result.altKey = true;
onlyKey = onlyKey.replace("⌥", "");
}
if (hotkeyStr.indexOf("⇧") != -1) {
result.shiftKey = true;
onlyKey = onlyKey.replace("⇧", "");
}
// 未处理 windows btn （MetaKey）
result.key = onlyKey;
// 在https://github.com/siyuan-note/siyuan/commit/70acd57c4b4701b973a8ca93fadf6c003b24c789#diff-558f9f531a326d2fd53151e3fc250ac4bd545452ba782b0c7c18765a37a4e2cc
// 更改中，思源改为使用keyCode判断快捷键按下事件，这里进行了对应的转换
// 另请参考该提交中涉及的文件
result.keyCode = keyCodeList[result.key];
console.assert(result.keyCode != undefined, `keyCode转换错误,key为${result.key}`);
switch (result.key) {
case "→": {
result.key = "ArrowRight";
break;
}
case "←": {
result.key = "ArrowLeft";
break;
}
case "↑": {
result.key = "ArrowUp";
break;
}
case "↓": {
result.key = "ArrowDown";
break;
}
case "⌦": {
result.key = "Delete";
break;
}
case "⌫": {
result.key = "Backspace";
break;
}
case "↩": {
result.key = "Enter";
break;
}
}
return result;
}
if (g_addSnippets) addSnippets();
const keyCodeList = {
"⌫": 8,
"⇥": 9,
"↩": 13,
"⇧": 16,
"⌘": 91,
"⌥": 18,
"Pause": 19,
"CapsLock": 20,
"Escape": 27,
" ": 32,
"PageUp": 33,
"PageDown": 34,
"End": 35,
"Home": 36,
"←": 37,
"↑": 38,
"→": 39,
"↓": 40,
"PrintScreen": 44,
"Insert": 45,
"⌦": 46,
"0": 48,
"1": 49,
"2": 50,
"3": 51,
"4": 52,
"5": 53,
"6": 54,
"7": 55,
"8": 56,
"9": 57,
"A": 65,
"B": 66,
"C": 67,
"D": 68,
"E": 69,
"F": 70,
"G": 71,
"H": 72,
"I": 73,
"J": 74,
"K": 75,
"L": 76,
"M": 77,
"N": 78,
"O": 79,
"P": 80,
"Q": 81,
"R": 82,
"S": 83,
"T": 84,
"U": 85,
"V": 86,
"W": 87,
"X": 88,
"Y": 89,
"Z": 90,
"ContextMenu": 93,
"MyComputer": 182,
"MyCalculator": 183,
";": 186,
"=": 187,
",": 188,
"-": 189,
".": 190,
"/": 191,
"`": 192,
"[": 219,
"\\": 220,
"]": 221,
"'": 222,
"*": 106,
"+": 107,
"-": 109,
".": 110,
"/": 111,
"F1": 112,
"F2": 113,
"F3": 114,
"F4": 115,
"F5": 116,
"F6": 117,
"F7": 118,
"F8": 119,
"F9": 120,
"F10": 121,
"F11": 122,
"F12": 123,
"NumLock": 144,
"ScrollLock": 145
};
原贴：
看到个 帖子 ，添加按钮应该是这样：
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();
但是我不知道怎么打开代码片段界面
