集成 picgo 到思源

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

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

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

  • 思源笔记

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

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

    26032 引用 • 108046 回帖

相关帖子

欢迎来到这里!

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

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

    哇哦,中文编程哎

  • caogle

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

推荐标签 标签

  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 464 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖 • 1 关注
  • 数据库

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

    345 引用 • 754 回帖
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    947 引用 • 1460 回帖 • 2 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖 • 1 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖
  • Gzip

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

    9 引用 • 12 回帖 • 175 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 818 回帖
  • Outlook
    1 引用 • 5 回帖 • 5 关注
  • danl
    173 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 252 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 636 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 677 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    98 引用 • 903 回帖
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 613 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 648 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 766 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖 • 3 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 2 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 628 关注
  • Solidity

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

    3 引用 • 18 回帖 • 438 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 233 回帖 • 2 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 99 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 3 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    228 引用 • 476 回帖