API 获取并处理块的一些疑问

因为突然想要写一个插件来帮我格式化一下普通的内容块,所以今天研究了一个晚上的插件开发和 api,现在发现内容块 API 有点问题不好理解,希望各位能帮我解答一二。

  1. 在更新块 API 里支持两种模式:markdownDOM。不过这两种元素我感觉都不是很好获取。
    1. 使用 api 能获取的是 kramdown,这个会带有 {: updated id} 属性,要是用 markdown 再发回去就会当成普通的文字放进去。
    2. DOM 也不算好获取,从块标里面的插件按钮获取到的结果是不带 HTML 的,没法获取当前元素的 html。这样难道只能用 ts 去页面里获取吗?
  2. 获取了 kramdown 之后,如果要更新块一定要去掉 {: updated id} 这个属性吗,有没有可能不处理这个属性也不影响文本显示的办法?
  3. 有可能通过 api 获取到当前块的 dom?或者获取到当前块的类型?
  4. 还在继续思考中...感谢各位的帮助。如果想要先行了解代码可以先在这里了解最新的进度。目前通过 ai 暂时解决了 {: updated id} 属性,不过这个方法不算好,也希望各位能帮我提出一些建议。
  • 思源笔记

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

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

    25059 引用 • 103284 回帖
  • Q&A

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

    9549 引用 • 43494 回帖 • 101 关注
被采纳的回答
  • player 3

    "/api/block/insertBlock" "/api/block/updateBlock" 可以传入 kramdown。 内容与属性需要用 '\n' 来隔开。

    id updated 可以不用去掉。 如果你要插入新的块,需要生成新的 id 避免重复。

    "/api/block/getBlockDOM" 可以按块 id 读取 dom.

    "/api/transactions" 可以按 dom 来更新或者插入等。

    另外, dom 与 markdown 的转换可以用:
    export const NewLute: () => Lute = (globalThis as any).Lute.New;

    lute = NewLute();

    const md = lute.BlockDOM2Md(div.outerHTML);

    export class Lute { public static WalkStop: number; public static WalkSkipChildren: number; public static WalkContinue: number; public static Version: string; public static Caret: string; public static New(): Lute; public static EChartsMindmapStr(text: string): string; public static NewNodeID(): string; public static Sanitize(html: string): string; public static EscapeHTMLStr(str: string): string; public static UnEscapeHTMLStr(str: string): string; public static GetHeadingID(node: ILuteNode): string; public static BlockDOM2Content(html: string): string; private constructor(); public BlockDOM2Content(text: string): string; public BlockDOM2EscapeMarkerContent(text: string): string; public SetSpin(enable: boolean): void; public SetTextMark(enable: boolean): void; public SetHTMLTag2TextMark(enable: boolean): void; public SetHeadingID(enable: boolean): void; public SetProtyleMarkNetImg(enable: boolean): void; public SetSpellcheck(enable: boolean): void; public SetFileAnnotationRef(enable: boolean): void; public SetSetext(enable: boolean): void; public SetYamlFrontMatter(enable: boolean): void; public SetChineseParagraphBeginningSpace(enable: boolean): void; public SetRenderListStyle(enable: boolean): void; public SetImgPathAllowSpace(enable: boolean): void; public SetKramdownIAL(enable: boolean): void; public BlockDOM2Md(html: string): string; public BlockDOM2StdMd(html: string): string; public SetSuperBlock(enable: boolean): void; public SetTag(enable: boolean): void; public SetInlineMath(enable: boolean): void; public SetGFMStrikethrough(enable: boolean): void; public SetGFMStrikethrough1(enable: boolean): void; public SetMark(enable: boolean): void; public SetSub(enable: boolean): void; public SetSup(enable: boolean): void; public SetInlineAsterisk(enable: boolean): void; public SetInlineUnderscore(enable: boolean): void; public SetBlockRef(enable: boolean): void; public SetSanitize(enable: boolean): void; public SetHeadingAnchor(enable: boolean): void; public SetImageLazyLoading(imagePath: string): void; public SetInlineMathAllowDigitAfterOpenMarker(enable: boolean): void; public SetToC(enable: boolean): void; public SetIndentCodeBlock(enable: boolean): void; public SetParagraphBeginningSpace(enable: boolean): void; public SetFootnotes(enable: boolean): void; public SetLinkRef(enable: boolean): void; public SetEmojiSite(emojiSite: string): void; public PutEmojis(emojis: IObject): void; public SpinBlockDOM(html: string): string; public Md2BlockDOM(html: string): string; public SetProtyleWYSIWYG(wysiwyg: boolean): void; public MarkdownStr(name: string, md: string): string; public GetLinkDest(text: string): string; public BlockDOM2InlineBlockDOM(html: string): string; public BlockDOM2HTML(html: string): string; public HTML2Md(html: string): string; public HTML2BlockDOM(html: string): string; }

欢迎来到这里!

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

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

    感谢!我去研究一下!

  • 其他回帖
  • Achuan-2 1

    想问问大佬,/api/transactions 的传入值有没有示例呢,data 值是传入 id 和操作 update 就可以了吗


    摸索了下,这样就能把 html 修改的内容保存了

    // 1. 获取目标元素 const targetElement = document.querySelector('div[data-node-id="20241205223647-qaxnubd"]'); // 2. 获取 HTML 内容 (并进行一些基本的错误处理) let originalHtmlContent = ""; // 用于保存原始 HTML 内容 let originalNowTime; // 用于保存原始时间 if (targetElement) { originalHtmlContent = targetElement.outerHTML; } else { console.error("未找到指定 data-node-id 的元素!"); // 可以选择在这里返回或者执行其他错误处理逻辑 // return; } // 修改HTML newHtmlContent = targetElement.outerHTML; // 3. 更新 let nowTime = new Date().getTime(); // 更新后的时间 const res = await fetchSyncPost("/api/transactions", { session: siyuan.ws.app.appId, app: siyuan.ws.app.appId, reqId: nowTime, transactions: [{ "doOperations": [{ action: "update", id: '20241205223647-qaxnubd', data: newHtmlContent, // 更新后的 HTML 内容 (如果需要更新) }], "undoOperations": [{ action: "update", id: '20241205223647-qaxnubd', data: originalHtmlContent, // 使用原始 HTML 内容 }] }] }); console.log(res);
    3 回复
    1 操作
    Achuan-2 在 2024-12-18 07:22:50 更新了该回帖
  • 一般没必要使用/api/transactions 这个 api 吧,这个 api 的使用场景应该是那些需要事务的操作,比如多个操作保证原子性。

    image.png

    1 回复
  • player 3

    "/api/block/insertBlock" "/api/block/updateBlock" 可以传入 kramdown。 内容与属性需要用 '\n' 来隔开。

    id updated 可以不用去掉。 如果你要插入新的块,需要生成新的 id 避免重复。

    "/api/block/getBlockDOM" 可以按块 id 读取 dom.

    "/api/transactions" 可以按 dom 来更新或者插入等。

    另外, dom 与 markdown 的转换可以用:
    export const NewLute: () => Lute = (globalThis as any).Lute.New;

    lute = NewLute();

    const md = lute.BlockDOM2Md(div.outerHTML);

    export class Lute { public static WalkStop: number; public static WalkSkipChildren: number; public static WalkContinue: number; public static Version: string; public static Caret: string; public static New(): Lute; public static EChartsMindmapStr(text: string): string; public static NewNodeID(): string; public static Sanitize(html: string): string; public static EscapeHTMLStr(str: string): string; public static UnEscapeHTMLStr(str: string): string; public static GetHeadingID(node: ILuteNode): string; public static BlockDOM2Content(html: string): string; private constructor(); public BlockDOM2Content(text: string): string; public BlockDOM2EscapeMarkerContent(text: string): string; public SetSpin(enable: boolean): void; public SetTextMark(enable: boolean): void; public SetHTMLTag2TextMark(enable: boolean): void; public SetHeadingID(enable: boolean): void; public SetProtyleMarkNetImg(enable: boolean): void; public SetSpellcheck(enable: boolean): void; public SetFileAnnotationRef(enable: boolean): void; public SetSetext(enable: boolean): void; public SetYamlFrontMatter(enable: boolean): void; public SetChineseParagraphBeginningSpace(enable: boolean): void; public SetRenderListStyle(enable: boolean): void; public SetImgPathAllowSpace(enable: boolean): void; public SetKramdownIAL(enable: boolean): void; public BlockDOM2Md(html: string): string; public BlockDOM2StdMd(html: string): string; public SetSuperBlock(enable: boolean): void; public SetTag(enable: boolean): void; public SetInlineMath(enable: boolean): void; public SetGFMStrikethrough(enable: boolean): void; public SetGFMStrikethrough1(enable: boolean): void; public SetMark(enable: boolean): void; public SetSub(enable: boolean): void; public SetSup(enable: boolean): void; public SetInlineAsterisk(enable: boolean): void; public SetInlineUnderscore(enable: boolean): void; public SetBlockRef(enable: boolean): void; public SetSanitize(enable: boolean): void; public SetHeadingAnchor(enable: boolean): void; public SetImageLazyLoading(imagePath: string): void; public SetInlineMathAllowDigitAfterOpenMarker(enable: boolean): void; public SetToC(enable: boolean): void; public SetIndentCodeBlock(enable: boolean): void; public SetParagraphBeginningSpace(enable: boolean): void; public SetFootnotes(enable: boolean): void; public SetLinkRef(enable: boolean): void; public SetEmojiSite(emojiSite: string): void; public PutEmojis(emojis: IObject): void; public SpinBlockDOM(html: string): string; public Md2BlockDOM(html: string): string; public SetProtyleWYSIWYG(wysiwyg: boolean): void; public MarkdownStr(name: string, md: string): string; public GetLinkDest(text: string): string; public BlockDOM2InlineBlockDOM(html: string): string; public BlockDOM2HTML(html: string): string; public HTML2Md(html: string): string; public HTML2BlockDOM(html: string): string; }
    3 回复
  • 查看全部回帖

推荐标签 标签

  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    239 引用 • 224 回帖
  • ActiveMQ

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

    19 引用 • 13 回帖 • 678 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 734 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    22 引用 • 148 回帖 • 13 关注
  • iOS

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

    88 引用 • 139 回帖
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题,项目仓库:https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖 • 2 关注
  • 职场

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

    127 引用 • 1708 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 81 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖
  • OpenCV
    15 引用 • 36 回帖
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    210 引用 • 2040 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    729 引用 • 1278 回帖
  • WiFiDog

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

    1 引用 • 7 回帖 • 610 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    36 引用 • 155 回帖
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    410 引用 • 3588 回帖
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 27 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖 • 1 关注
  • Bootstrap

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

    18 引用 • 33 回帖 • 648 关注
  • SSL

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

    70 引用 • 193 回帖 • 413 关注
  • sts
    2 引用 • 2 回帖 • 227 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    556 引用 • 675 回帖
  • CodeMirror
    2 引用 • 17 回帖 • 158 关注
  • Facebook

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

    4 引用 • 15 回帖 • 441 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 341 关注