求思源插件获取当前块(光标所在的块)的内容的代码

需求:能返回/打印当前块的内容。

  • 思源笔记

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

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

    21404 引用 • 84452 回帖
  • Q&A

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

    7654 引用 • 34835 回帖 • 196 关注

相关帖子

被采纳的回答
  • 调用 getCursorElement().closest('[data-type]') 即可,多个块嵌套的仅获取最内层的块,比如 li task 等。

    function getCursorElement() {
        const selection = window.getSelection();
        if (selection.rangeCount > 0) {
            const range = selection.getRangeAt(0);
            // 获取光标所在的元素
            const cursorElement = getCursorElementRecursive(range.startContainer);
            return cursorElement;
        }
        return null;
    }
    function getCursorElementRecursive(node) {
        if (node.nodeType === Node.TEXT_NODE) {
            // 如果是文本节点,递归查找其父元素节点
            return getCursorElementRecursive(node.parentElement);
        } else {
            // 如果是元素节点,直接返回
            return node;
        }
    }
    

    getCursorElementRecursive 这个也可以不用递归,一般文档结构中,文本节点的直接父节点通常是元素节点,而不是另一个文本节点。

    所以,直接这样也可以,node.parentElement 本身就可以直接获取元素结点

    function getCursorElementRecursive(node) {
        if (node.nodeType === Node.TEXT_NODE) {
            // 如果是文本节点,返回其父元素节点
            return node.parentElement;
        } else {
            // 如果是元素节点,直接返回
            return node;
        }
    }
    

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 调用 getCursorElement().closest('[data-type]') 即可,多个块嵌套的仅获取最内层的块,比如 li task 等。

    function getCursorElement() {
        const selection = window.getSelection();
        if (selection.rangeCount > 0) {
            const range = selection.getRangeAt(0);
            // 获取光标所在的元素
            const cursorElement = getCursorElementRecursive(range.startContainer);
            return cursorElement;
        }
        return null;
    }
    function getCursorElementRecursive(node) {
        if (node.nodeType === Node.TEXT_NODE) {
            // 如果是文本节点,递归查找其父元素节点
            return getCursorElementRecursive(node.parentElement);
        } else {
            // 如果是元素节点,直接返回
            return node;
        }
    }
    

    getCursorElementRecursive 这个也可以不用递归,一般文档结构中,文本节点的直接父节点通常是元素节点,而不是另一个文本节点。

    所以,直接这样也可以,node.parentElement 本身就可以直接获取元素结点

    function getCursorElementRecursive(node) {
        if (node.nodeType === Node.TEXT_NODE) {
            // 如果是文本节点,返回其父元素节点
            return node.parentElement;
        } else {
            // 如果是元素节点,直接返回
            return node;
        }
    }
    
    2 回复
    1 操作
    wilsons 在 2024-09-18 18:17:38 更新了该回帖
  • 感谢 🙏 已采纳

  • 请问大佬有没有办法获取到代码块的内容呢(还有 ID)?感谢万分!

    1 回复
  • 获取块元素再获取块内容不是很多方法

    获取块 id,可以用 element.dataset.nodeId

    获取内容,可以用 Lute 转换为 Markdown,也可以用 api 获取块信息,还可以通过 SQL 查询块信息。

    代码块也应该一样,你先研究下。

    1 回复
  • 感谢大佬!!!我主要是想做代码块语言自动检测插件的半自动模式,因为全自动模式的边缘情况太多了,半自动模式就只在输入 ``` 并回车(等于是个空的代码块)时候才起效

    1 回复
  • 然后呢?什么时候获取代码块的内容?

    比如,获取代码块的内容这样就可以

    getCursorElement().closest('[data-type][data-node-id]').querySelector(".hljs").children[1].textContent
    

    或者 用 Lute

    Lute.New().BlockDOM2Content(getCursorElement().closest('[data-type][data-node-id]').outerHTML)
    
    2 回复
    1 操作
    wilsons 在 2024-09-18 21:44:26 更新了该回帖
  • 感谢大佬,这个应该是可以用。我再打磨一下

    我的设想是,粘贴时候可以劫持(目前已经实现了),然后读取光标位置的块,如果是代码块,而且是空的代码块,就删除这个块后重新插入包含语言信息的块

    1 回复
  • 删除这个块后重新插入包含语言信息的块

    块 ID 有办法保持不变吗?(p.s. 不过考虑到场景,变了影响也不大)

    先找到块,创建在下面,然后删除之前找到的块
    zxkmm
请输入回帖内容 ...

推荐标签 标签

  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 739 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    131 引用 • 1114 回帖 • 135 关注
  • 百度

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

    63 引用 • 785 回帖 • 194 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 2 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    129 引用 • 171 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 5 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 735 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 4 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    107 引用 • 152 回帖
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • 数据库

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

    336 引用 • 669 回帖 • 1 关注
  • 博客

    记录并分享人生的经历。

    272 引用 • 2386 回帖
  • 996
    13 引用 • 200 回帖 • 3 关注
  • gRpc
    11 引用 • 9 回帖 • 55 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 1 关注
  • 禅道

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

    6 引用 • 15 回帖 • 142 关注
  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 617 关注
  • 旅游

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

    90 引用 • 898 回帖 • 1 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 466 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 198 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 10 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 4 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖
  • 前端

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

    247 引用 • 1347 回帖