场景: 将有道云笔记迁移到思源笔记
需要逐个笔记进行拷贝粘贴, 万恶的有道云笔记不支持图片的拷贝(大图片),需要保存为本地图片在插入到思源笔记。
当前的问题: 思源笔记插入图片的菜单比较远,需要二级菜单才能点到对应的功能,操作起来耗时费力。
期望:
方案 1: 添加“插入图片”的快捷键
方案 2: 在工具栏添加“插入图片”按钮
场景: 将有道云笔记迁移到思源笔记
需要逐个笔记进行拷贝粘贴, 万恶的有道云笔记不支持图片的拷贝(大图片),需要保存为本地图片在插入到思源笔记。
当前的问题: 思源笔记插入图片的菜单比较远,需要二级菜单才能点到对应的功能,操作起来耗时费力。
期望:
方案 1: 添加“插入图片”的快捷键
方案 2: 在工具栏添加“插入图片”按钮
我简单写了一个 js 片段, 不知道能否符合你的要求
// 增加按钮&快捷键实现: 插入图片或文件
// 修改有标记的配置 "[可修改]"
(async () => {
/*******************************自定义配置**************************************/
// 按钮id
const btn_e = {
/***********左上角**********/
// 返回按钮(左箭头)
barBack : "barBack",
// 前进按钮(右箭头)
barForward : "barForward",
// 同步按钮
barSync : "barSync",
// 皇冠图标
toolbarVIP : "toolbarVIP",
// 日历热力图插件
heatmap : "plugin_Calendar-heatmap_0",
/***********右上角**********/
// 搜索按钮
barSearch : "barSearch",
// 插件按钮
barPlugins : "barPlugins",
// 命令面板按钮
barCommand : "barCommand",
/***********左下角**********/
// 底栏中的隐藏侧栏按钮
barDock : "barDock",
/***********右下角**********/
// 底栏帮助按钮
statusHelp : "statusHelp",
}
// 插入位置
const position_e = {
// 插入位置: 目标元素前面
before : "beforebegin",
// 插入位置: 目标元素后面
after : "afterend",
}
// [可修改] 触发快捷键
const hotkey = "ctrl+alt+g"
// [可修改] 按钮 插入的位置 跟 哪个元素 有关
const btn_basic_id = btn_e.barForward
// [可修改] 按钮 插入到 元素 的前面还是后面
const btn_post = position_e.after
// [可修改] 按钮 的悬浮显示内容
const btn_tips = "插入图片或文件"
/*******************************代码分割线**************************************/
const icon_e = {
// 设置
setting : "iconSettings",
// 代码
code : "iconCode",
// 刷新
refresh : "iconRefresh",
// 调试
debug : "iconBug",
// 下方
after : "iconAfter",
// 下载
download : "iconDownload",
}
// 快捷键监听
document.addEventListener('keydown', event => {
console.log("hotkey")
if (checkShortcut(hotkey, event)) {
// 阻止默认行为,比如浏览器的保存网页操作
// event.preventDefault();
quickInsertImgFunc()
}
});
/* 重新加载会有延时, 所以需要等待1s之后再添加按钮 */
setTimeout(() => {
// 目标元素id, 插入位置, 新元素id, 显示内容, 图标, 点击回调
addElement(btn_basic_id, btn_post, "custom_quick_inser_img", btn_tips, icon_e.download, quickInsertImgFunc);
}, 1000);
function checkShortcut(hostkey, event) {
const keys = hostkey.split("+");
const key = event.key.toLowerCase();
const isCtrl = event.ctrlKey ? "ctrl+" : "";
const isAlt = event.altKey ? "alt+" : "";
const isShift = event.shiftKey ? "shift+" : "";
const combination = isAlt + isCtrl + isShift + key;
// console.log(keys.sort().join("+"))
// console.log(combination)
return keys.sort().join("+") === combination;
}
// 目标元素id, 插入位置, 新元素id, 显示内容, 图标, 点击回调
function addElement(targetId, position, newElementId, displayContent, icon, clickCallback) {
let barMode = document.getElementById(targetId);
if (barMode === null) {
return ""
}
barMode.insertAdjacentHTML(
position,
`<div id="${newElementId}" class="toolbar__item ariaLabel" aria-label="${displayContent}"></div>`
);
let newBtn = document.getElementById(newElementId);
if (newBtn === null) {
return ""
}
newBtn.innerHTML = `<svg><use xlink:href="#${icon}"></use></svg>`;
newBtn.addEventListener("click", clickCallback);
return newElementId
}
function quickInsertImgFunc() {
const more_btn = document.querySelector('.layout__center [data-type="more"]:not([data-menu]');
if (more_btn) {
more_btn.click();
setTimeout(() => {
const insert_btn = document.querySelector('#commonMenu > div.b3-menu__items > button:nth-child(1) > span > input');
if (insert_btn) {
insert_btn.click();
}
}, 200);
}
}
})()
Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。
AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。
HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。
微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。
Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用 。
一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。
深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。
各种网址链接、内容导航。
GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。
以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。
Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。
Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。
WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。
OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。
InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。
Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。
用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖。
用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/
互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。
Postman 是一款简单好用的 HTTP API 调试工具。
Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。
ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。
持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。
VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。
React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于