1
最近这两周周末都在折腾 VSCode 白板插件,其主要原理是将 Excalidraw
嵌入到 VSCode 的 WebView 中。如果所有功能正常,那么相比于在 Web 中使用,在 VSCode 中将会更方便。
截至目前,该插件的功能大概完成在 70% 左右。
基础的画图功能:


demo01.png
以及导出为 png/svg 格式:


demo02.gif
2
将 Excalidraw 做为 VSCode 插件以后,一些原 Web 上如 command/ctrl + s
等事件,便显的多余。
如何在不改变源代码的前提下,拦截 keydown
事件中某一指定事件,这着实让笔者费了不少时间。
最后,在参考浏览器插件的实现原理后,笔者魔改了 addEventListener
事件:
const isDarwin = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
const CTRL_OR_CMD = isDarwin ? 'metaKey' : 'ctrlKey';
function patchFn(originalFn) {
return function (...args) {
const [eventName, oldHandler] = args;
if (eventName === 'keydown') {
args[1] = e => {
if (e.key === "s" && e[CTRL_OR_CMD]) {
return false;
}
return oldHandler(e);
}
}
return originalFn.apply(this, args);
}
}
document.addEventListener = patchFn(document.addEventListener);
当然,这种方法,不是万不得己,建议还是不要使用。
3
还有一些在 Web 中可以正常使用,但在插件中并没有实现的功能,比如共享协作。
Excalidraw
在使用 WebSocket 生成房间 ID 以及传输内容时,使用了浏览器自带的加密算法 API SubtleCrypto 。而该 API 只能用于 HTTPS 协议,也就无法用于 VSCode WebView 中。在笔者尝试了 GitHub 上大部分的 polyfill 后,也仍然无济于事, stackoveflow 上也比较冷清。
因此,该功能只能遗憾止步于此。
关于该插件的更多细节,请参考 vscode-excalidraw 。