[js] 一键编辑思源图片,思源里也可以编辑图片了

这是个标题党啦 😄

其实就是思源里按 alt+ 单击图片调用本地图片编辑器编辑,但与思源默认的打开方式不同的是,alt+ 单击打开后,会等待编辑器窗口的关闭,当你编辑完成后,关闭编辑器时,会自动更新思源的图片,这样看起来就如同在思源中编辑一样丝滑。

光看文字你肯定没感觉,直接上图吧

image02.gif

有没有震撼到,没有没关系,多看几遍找找感觉 😂

代码:

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E6%80%9D%E6%BA%90alt+%E5%8D%95%E5%87%BB%E5%9B%BE%E7%89%87%E6%89%93%E5%BC%80%E6%9C%AC%E5%9C%B0%E5%9B%BE%E7%89%87%E7%BC%96%E8%BE%91%E5%99%A8.js

为什么做这个功能?

之前是因为解决这个问题 [插件请求] 图片标注 临时用的解决方案。后来使用过程中发现还不错,还算顺滑,为了方便更多人,想想还是放到 js 代码片段标签下吧。

常见问题:

  1. 如果同一个图片打开多个编辑器实例会怎样?
    如果都保存,最后一个保存的生效。
  2. 不同的图片可以同时打开多个编辑器实例吗?
    可以的,没影响。
  3. 除了画图和预览,可以调用其他编辑器吗?
    理论上可以的,实际以测试为准。
  4. Windows 和 Mac 上有什么不同吗?
    由于 Mac 没有打开并等待命令,所以,Mac 上实现方式是通过监控是否该应用的所有窗口都关闭实现。
    open -W 参数虽然能等待,但必须完全退出才行,而 Mac 上默认关闭是不会退出应用的。
    windows 上实现方式是等待进程退出后更新思源图片,如果关闭窗口后编辑器进程未完全退出有可能无法刷新,由于每个软件实现方式不同,具体以实际测试为准。

注意事项:

目前仅支持 electron 端,及 Windows 和 Mac 系统。

默认 windows 调用画图,Mac 调用预览。

打赏作者

image.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    25768 引用 • 106675 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    174 引用 • 1222 回帖 • 6 关注
4 操作
wilsons 在 2025-04-14 09:53:37 更新了该帖
wilsons 管理员在 2025-04-10 16:00:47 取消置顶了该帖
wilsons 管理员在 2025-04-10 06:07:01 置顶了该帖
wilsons 在 2025-03-10 10:13:38 更新了该帖

相关帖子

优质回帖
  • Adaxi 1

    现在结合 Paint.NET 使用,非常的方便。js 代码片段.7z

  • 80gt 1 赞同

    解决了,感谢大佬 ❤️ 是第四条,我没有设置路径

  • wilsons 1 赞同

    把图片链接后面的?t=xxxx 去掉即可,为了对抗图片缓存加的这个,目前没有好的解决方案,不加这个,图片修改后需要重启思源才能生效

    image.png

    好在,这几个菜单也没什么用,就是在标签或窗口打开图片而已

    已给官方提了 issue Issue #14894 · siyuan-note/siyuan

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • stevehfut via Linux

    有没有震撼到,没有没关系,多看几遍找找感觉 😂

    要是有 docker 端就可以把我震撼死 😄

    1 回复
  • wilsons 1 评论

    其实可以的,用 canvas 实现简单的标记还是可以的,但这个复杂度嘛,估计不是一般人愿意搞的。

    这是个偷懒的方式,勉强满足需要。

    确实,哈哈哈,大佬幸苦了,为思源贡献了好多好用的 js 代码
    stevehfut
  • 正需要这个,非常感谢!

  • 虽然我是 Docker 用户,但还是感谢一下!

  • openAI 1 评论

    膜拜技术大佬。pdf 等附件也能这样编辑吗?

    1 回复
    有没有改好的代码?非 IT 人士,不会改代码。~~~
    glass
  • wilsons

    理论上是可以的,但要改代码,这里按键后会判断鼠标点击的目标是否图片,只有图片才执行。

    如果你想改成 pdf 等,需要去掉这个图片的判断,然后再改成 pdf 的编辑器 app 应该就行了。

  • Adaxi 1 1 评论

    现在结合 Paint.NET 使用,非常的方便。js 代码片段.7z

    1 回复
    2 操作
    Adaxi 在 2024-12-11 22:18:19 更新了该回帖
    Adaxi 在 2024-12-11 19:57:08 更新了该回帖
    感谢分享
    wilsons
  • 这个要怎么弄

    1 回复
  • wilsons

    大佬回帖右侧有修改后的 js 片段下载。

  • briverlan via Android

    但是,代码放在哪里?

    1 回复
  • nightstars

    厉害

  • wilsons

    打开 设置 - 外观 ,点击 代码片段设置

    image.png

    image.png

    如果有问题,可以尝试重启下思源。

    1 回复
  • nightstars

    大佬,图片的刷新好像得手动操作,一图多用的情况下,你修改图片,其他的图片引用需要手动刷新。

    1 回复
  • wilsons

    不需要的,你重启思源或你新空间测试看看,如果还有问题,可以把你的文件导出上传到帖子里我看看。

    image03.gif

  • glass

    太有用了。之间每次都是打开思源资源库的找到原始文件,右键编辑再保存,然后更新的图片不会自动刷新,还得重新刷新文档树……

  • forwardlee

    体验操作上很方便

  • 给自己的帖子置顶算不算滥用权限?一般都是重要通知才允许管理员置顶的

  • tiewei

    3.1.27 文档处于只读模式时,也能触发进入图片编辑,编辑成功后返回能看到修改的图片,但重新载入文档后,图片丢失(文档未引用),实际图片还在。

    1 回复
  • wilsons

    已更新至 0.0.2 版

    0.0.2 发布服务和锁定状态不可修改

    3 回复
  • 80gt

    大佬,我的不生效是怎么回事呀 😭

  • 80gt

    alt+ 鼠标左键点图片没反应,大佬 😭

    1 回复
  • 80gt

    重启过几次了,插件也全关了,都没反应 😭

  • wilsons

    这个代码很多人用过,没有人反馈过这个问题,这说明大概率是你本地环境问题或操作不正确原因。

    推荐

    1 确保 js 代码片段正确开启

    image.png

    2 看看控制台是否有报错信息

    image.png

    3 新空间测试试试

    虽然关闭插件等能避免影响,但我推荐新空间测试,这个最大程度保证外来因素的影响,还简单方便。

    1. 这些参数确保配置无误

      // windows 下调用的编辑器APP,默认 mspaint // 注意:Windows下的路径分隔符\要用\\表示,比如 C:\\path\\some.exe const windowsApp = 'mspaint'; // Mac下调用的编辑器APP,默认 Preview // 这里是应用程序名,可在应用右键简介或应用包的Info.list里查看 const macosApp = 'Preview';
    2. 确保使用平台正确
      目前仅 electron 客户端支持,即仅电脑端思源支持,不支持网页版和手机版。

    3. 这个函数第二个参数加 true 试试

      document.addEventListener('mousedown', function(event) { ...... }, true); // 这里第2个参数加true试试
    4. 如果还有问题请提供更多信息,信息太少无法判断

    3 回复
  • 80gt

    js 两个开关都已经打开,进入思源报错第一个红叉那条,按 alt+ 左键点图片报错第二个红叉那条,请大佬帮忙看看 😭 image.png

    1 回复
  • 80gt 1 赞同

    解决了,感谢大佬 ❤️ 是第四条,我没有设置路径

  • wilsons

    这个报错是指没有找到画图软件。

    1 确保参数正确配置

    // windows 下调用的编辑器APP,默认 mspaint // 注意:Windows下的路径分隔符\要用\\表示,比如 C:\\path\\some.exe const windowsApp = 'mspaint';

    2 确保系统中画图软件可正常访问,且路径在环境变量可访问范围内

    可通过以下命令查看画图软件路径

    image.png

  • 80gt

    观察到一个 bug,影响不大但想反馈一下,编辑过的图片右键打开菜单会少几个功能
    没编辑过的图片image.png

    编辑过的图片image.png

    2 回复
  • wilsons 1 赞同

    把图片链接后面的?t=xxxx 去掉即可,为了对抗图片缓存加的这个,目前没有好的解决方案,不加这个,图片修改后需要重启思源才能生效

    image.png

    好在,这几个菜单也没什么用,就是在标签或窗口打开图片而已

    已给官方提了 issue Issue #14894 · siyuan-note/siyuan

    1 操作
    wilsons 在 2025-05-24 17:03:14 更新了该回帖
  • wilsons 1
    1 回复
  • wilsons

    思源 v3.1.31 已经解决了这个问题

    see Issue #14894 · siyuan-note/siyuan

    1 回复
  • 80gt

    😄 👍

  • 80gt

    大佬,用这个软件只需要改路径,其它代码都不用修改吗

    1 回复
  • wilsons

    理论上是滴,实际以测试为准。

请输入回帖内容 ...
wilsons
正在努力开发 wilsons 工具箱中 🛠️ 目前已正式入驻爱发电啦!💖 想催更、提需求?欢迎访问 👉 https://afdian.com/a/wilsons

推荐标签 标签

  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 34 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 220 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 433 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 675 关注
  • V2Ray
    1 引用 • 15 回帖 • 3 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 63 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    17 引用 • 7 回帖 • 3 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    89 引用 • 150 回帖 • 1 关注
  • OneNote
    1 引用 • 3 回帖 • 1 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 449 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 77 回帖
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    133 引用 • 796 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 91 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    178 引用 • 3866 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 184 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 402 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 385 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1708 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 176 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9880 引用 • 44927 回帖 • 79 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 369 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    246 引用 • 1338 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3201 引用 • 8216 回帖 • 6 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 85 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 171 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    8 引用 • 15 回帖 • 6 关注