登录 注册

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

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

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

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

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

    25294 引用 • 104404 回帖
  • Q&A

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

    9662 引用 • 43954 回帖 • 90 关注
1 引用
思源笔记插件开发笔记丨调用 api 操作块支持撤回（使用 Transaction） • Achuan-2
50 悬赏
1 关注
4 收藏
1 引用
11 回帖
5
3
2
570 147 243 179

相关帖子

被采纳的回答
  • 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;
}
​
11 回帖
API 获取并处理块的一些疑问

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • player •
    付费者 捐赠者

    数据库的，有些可能不通用。

     transSetAttrViewColWrap(avID: string, blockID: string, colID: string, wrap = true) {
        const op = {} as IOperation;
        op.action = "setAttrViewColWrap";
        op.avID = avID;
        op.blockID = blockID;
        op.id = colID;
        op.data = wrap;
        return op;
    },
    transSetAttrViewColHidden(avID: string, blockID: string, colID: string, hide = true) {
        const op = {} as IOperation;
        op.action = "setAttrViewColHidden";
        op.avID = avID;
        op.blockID = blockID;
        op.id = colID;
        op.data = hide
        return op;
    },
    transSetAttrViewSorts(avID: string, blockID: string, colID: string, order: "ASC" | "DESC") {
        const op = {} as IOperation;
        op.action = "setAttrViewSorts";
        op.avID = avID;
        op.blockID = blockID;
        op.data = [{ column: colID, order }]
        return op;
    },
    transSetAttrViewColCalc(avID: string, blockID: string, colID: string, operator: CalcOperator) {
        const op = {} as IOperation;
        op.action = "setAttrViewColCalc";
        op.avID = avID;
        op.data = { operator };
        op.blockID = blockID;
        op.id = colID;
        return op;
    },
    transSetAttrViewFilters(avID: string, blockID: string, filters: IAVFilter[]) {
        const op = {} as IOperation;
        op.action = "setAttrViewFilters";
        op.avID = avID;
        op.data = filters;
        op.blockID = blockID;
        return op;
    },
    transSetAttrViewViewName(avID: string, viewID: string, name: string) {
        const op = {} as IOperation;
        op.action = "setAttrViewViewName";
        op.avID = avID;
        op.id = viewID;
        op.data = name;
        return op;
    },
    transUpdateAttrViewCol(avID: string, colId: string, name: string, type?: TAVCol) {
        const op = {} as IOperation;
        op.action = "updateAttrViewCol";
        op.id = colId;
        op.avID = avID;
        op.name = name;
        op.type = type;
        return op;
    },
    transSetAttrViewName(avID: string, name: string) {
        const op = {} as IOperation;
        op.action = "setAttrViewName";
        op.id = avID;
        op.data = name;
        return op;
    },
    transRemoveAttrViewCol(avID: string, colID: string) {
        const op = {} as IOperation;
        op.action = "removeAttrViewCol";
        op.avID = avID;
        op.id = colID;
        return op;
    },
    transAddAttrViewCol(avID: string, name: string, id = NewNodeID(), type: TAVCol = "text", previousID = "") {
        const op = {} as IOperation;
        op.action = "addAttrViewCol";
        op.avID = avID;
        op.name = name;
        op.previousID = previousID;
        op.type = type;
        op.id = id;
        return op;
    },
    transUpdateAttrViewCellBatch(args: { avID: string, cellID?: string, colID: string, rowID_BlockID: string, value: IAVCellValue }[]) {
        return args.map(arg => {
            const op = {} as IOperation;
            op.action = "updateAttrViewCell";
            op.avID = arg.avID;
            op.id = arg.cellID;
            op.keyID = arg.colID;
            op.rowID = arg.rowID_BlockID;
            op.data = arg.value;
            return op;
        })
    },
    transInsertAttrViewBlock(avID: string, blockID: string, srcs: IOperationSrcs[], previousID = "", ignoreFillFilter = true) {
        const op = {} as IOperation;
        op.action = "insertAttrViewBlock";
        op.avID = avID;
        op.blockID = blockID;
        op.previousID = previousID;
        op.ignoreFillFilter = ignoreFillFilter;
        op.srcs = srcs;
        return op;
    },
    transDoUpdateUpdated(blockID: string, data = timeUtil.getYYYYMMDDHHmmss()) {
        const op = {} as IOperation;
        op.action = "doUpdateUpdated";
        op.id = blockID
        op.data = data
        return op;
    },
​
  • 其他回帖
  • 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 更新了该回帖
  • wilsons •
    付费者 捐赠者

    一般没必要使用/api/transactions 这个 api 吧，这个 api 的使用场景应该是那些需要事务的操作，比如多个操作保证原子性。

    image.png

    1 回复
  • EmptyLight • • 1 评论
    付费者 作者

    /api/transactions 的参数是只有 HTML 还是同时兼容 markdown 呢

    只有 html
    player •
  • 查看全部回帖
EmptyLight
就地开摆，有事邮件
回帖
573
 帖子
30
 积分
9596

近期热议

推荐标签 标签

  • 浅吟主题

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

    1 引用 • 28 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言，在 20 世纪 90 年代中期由日本的松本行弘（まつもとゆきひろ/Yukihiro Matsumoto）设计并开发。在 Ruby 社区，松本也被称为马茨（Matz）。

    7 引用 • 31 回帖 • 246 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 650 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 1 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 3 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 16 关注
  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • CSS

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

    199 引用 • 542 回帖
  • 音乐

    你听到信仰的声音了么？

    62 引用 • 512 回帖
  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 2 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    289 引用 • 4492 回帖 • 655 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 206 关注
  • 倾城之链
    23 引用 • 66 回帖 • 165 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 111 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 294 关注
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 318 回帖 • 254 关注
  • Git

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

    211 引用 • 358 回帖 • 1 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    84 引用 • 324 回帖 • 1 关注
  • Rust

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

    58 引用 • 22 回帖 • 4 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    116 引用 • 54 回帖
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 65 关注
  • jQuery

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

    63 引用 • 134 回帖 • 734 关注
  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 593 关注
  • 智能合约

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

    1 引用 • 11 回帖
  • Solidity

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

    3 引用 • 18 回帖 • 435 关注

最新标签