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

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

  • 思源笔记

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

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

    22346 引用 • 89406 回帖 • 1 关注
  • Q&A

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

    8116 引用 • 37015 回帖 • 160 关注

相关帖子

被采纳的回答
  • wilsons 2

    调用 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;
        }
    }
    

欢迎来到这里!

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

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

    调用 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 回复
  • wilsons 1

    获取块元素再获取块内容不是很多方法

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

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

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

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

    1 回复
  • wilsons 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
请输入回帖内容 ...

推荐标签 标签

  • 大疆创新

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

    2 引用 • 14 回帖
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 22 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 小薇

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

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

    34 引用 • 467 回帖 • 742 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3187 引用 • 8213 回帖
  • 外包

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

    26 引用 • 232 回帖 • 2 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 62 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    190 引用 • 1057 回帖
  • 安全

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

    199 引用 • 816 回帖 • 1 关注
  • RESTful

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

    30 引用 • 114 回帖 • 1 关注
  • 电影

    这是一个不能说的秘密。

    120 引用 • 599 回帖
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 531 关注
  • DevOps

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

    47 引用 • 25 回帖 • 1 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 99 关注
  • RabbitMQ

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

    49 引用 • 60 回帖 • 362 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 471 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 18 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖 • 1 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 328 关注
  • 以太坊

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

    34 引用 • 367 回帖
  • HTML

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

    107 引用 • 295 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 384 关注
  • Quicker

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

    32 引用 • 130 回帖 • 2 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 63 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖