集成 picgo 到思源

本贴最后更新于 1024 天前,其中的信息可能已经时移世改

主要是上传部分,菜单之类的可以自己实现一下

export class picGo extends naive.plugin { constructor() { super({name:picGo}); this.初始化(); let 导出按钮设置 = { 按钮提示: "上传到picgo", 按钮图标: "#iconUpload", 按钮文字: "上传到picgo", 回调函数: (event) => { this.点击上传文档图片(event); }, }; let 文档按钮设置 = { 块类型: "NodeDocument", 菜单图标: "#iconUpload", 菜单文字: "上传到picgo", 回调函数: () => { this.id上传文档图片(this.当前文档id); }, }; let 图片菜单设置 = { 块类型: "image", 菜单图标: "#iconUpload", 菜单文字: "上传到picgo", 回调函数: () => { this.上传单张图片(); }, }; let 图片菜单设置1 = { 块类型: "image", 菜单图标: "#iconUpload", 菜单文字: "上传到picgo并改变地址", 回调函数: () => { this.上传单张图片(true); }, }; this.注册预览按钮(导出按钮设置); this.注册文档右上角菜单(文档按钮设置); this.注册图片菜单(图片菜单设置); this.注册图片菜单(图片菜单设置1); this.注册文档树菜单(文档按钮设置) } async 初始化() { let { PicGo, } = require(`${naive.pathConstructor.pluginsPath()}/picGo/node_modules/picgo`); this.picGoPath = this.initFolder(); this.picgo = new PicGo(this.picGoPath + "/picgoConfig.json"); let that = this; this.picgo.on("afterUpload", function (ctx) { console.log(ctx.output); ctx.output.forEach((image) => { console.log(image); console.log(that); if (that.previewer) { that.添加图片(that.previewer, image); } }); alert("上传完成"); // [{fileName, width, height, extname, imgUrl}] <- 注意有imgUrl了。 }); } 上传完成回调() {} 添加图片(previewer, image) { let url = image.imgUrl; let name = image.fileName; let imageEls = previewer.querySelectorAll(`img[src='assets/${name}']`); console.log(imageEls); if (imageEls[0]) { imageEls.forEach((el) => { el.src = url; }); } } async 点击上传文档图片(event) { event.stopPropagation(); console.log(event.currentTarget.parentElement.parentElement.parentElement); let id = event.currentTarget.parentElement.parentElement.previousElementSibling .firstElementChild.dataset.nodeId; console.log(id); this.previewer = event.currentTarget.parentElement.nextElementSibling; console.log(this.previewer); let images = await this.kernelApi.获取文档图片附件({ id: id }); console.log(images); if (images) { images.forEach((image) => { if (image.startsWith("assets")) { let realimage = this.app.workspaceDir + "/data/" + image; this.picgo.upload([realimage]); } }); } } async id上传文档图片(id) { console.log(id); let images = await this.kernelApi.获取文档图片附件({ id: id }); console.log(images); if (images) { images.forEach((image) => { if (image.startsWith("assets")) { let realimage = this.app.workspaceDir + "/data/" + image; this.picgo.upload([realimage]); } }); } } async 上传单张图片(flag){ let imagePath = (window.siyuan.menus.menu.element.querySelector('[placeholder="图片地址"]')).value+'' if (imagePath.startsWith("assets")) { let realimage = this.app.workspaceDir + "/data/" + imagePath; this.picgo.upload([realimage]); } if(flag){ this.picgo.on("afterUpload", (ctx)=> { ctx.output.forEach((image) => { console.log(image); (window.siyuan.menus.menu.element.querySelector('[placeholder="图片地址"]')).value=image.imgUrl let imageEls = document.querySelectorAll(`img[src='${imagePath}']`); console.log(imageEls) imageEls.forEach( el=>el.setAttribute('src',image.imgUrl) ) }); alert("上传完成"); // [{fileName, width, height, extname, imgUrl}] <- 注意有imgUrl了。 }); } } } export const environments =['APP']

设置界面自己实现一下吧就行了,反正就是改 json

  • 思源笔记

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

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

    25980 引用 • 107745 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Bard

    哇哦,中文编程哎

  • caogle

    想用自定义的图床,把 picgo 集成到思源内,请问上面的代码如何运行?

推荐标签 标签

  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 753 回帖
  • Access
    1 引用 • 3 回帖 • 3 关注
  • 代码片段

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

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

    180 引用 • 1279 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    77 引用 • 37 回帖
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 414 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    315 引用 • 547 回帖 • 1 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 13 关注
  • RemNote
    2 引用 • 16 回帖 • 20 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    43 引用 • 44 回帖
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    167 引用 • 597 回帖
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 2 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    125 引用 • 74 回帖 • 3 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    45 引用 • 114 回帖 • 171 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 271 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 707 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 3 关注
  • 笔记

    好记性不如烂笔头。

    310 引用 • 794 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 543 回帖
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖
  • MyBatis

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

    173 引用 • 414 回帖 • 363 关注
  • OpenCV
    15 引用 • 36 回帖 • 8 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 402 关注