思源笔记插件开发求助:如何获取选中文本并修改

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

我对 JS 不太熟悉,所以发帖求助

我希望开发一个插件,可以选中文本后,添加英文引号、中文引号、中文直角引号

但基础功能就卡住了,简单摸索后只想到一个方案

  • window.getSelection().toString() 获取选中的文字
  • document.execCommand("delete"); 删除文字
  • document.execCommand("insertHTML") 插入文字
function replaceSelectedText() {
    var sel, range;
    if (window.getSelection) {
        // 获取当前的选择对象
        sel = window.getSelection();
        if (sel.rangeCount) {
            // 获取选中的文字
            text = window.getSelection().toString();
            // 删除选中的文字
            document.execCommand("delete");
			// 插入指定文字
			document.execCommand("insertHTML",false,`「**${text}**」`);
        }
    }
}


replaceSelectedText();

想问问各位大佬

  • 我用上述方法已经可以实现对选中文本进行处理了,但是会报错,不知道怎么解决

    Snipaste20240103020439.png

    Snipaste20240103020513.png

  • 有什么更好的实现方式吗?document.execCommand 这个方法是不是不太好

  • 思源笔记的工具栏的加粗、高亮等功能是怎么实现的?

  • 有没有人已经做了类似的功能,有的话能否告知我(我知道 quicker 动作可以做出来,但我还是希望思源本身有这个功能)

  • 思源笔记

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

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

    20156 引用 • 77713 回帖 • 1 关注
  • Q&A

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

    7017 引用 • 31714 回帖 • 220 关注

相关帖子

被采纳的回答
  • 刷新后重置是因为数据没有上传,所以你需要模拟一个空的输入事件,或者,直接调用思源 protyle 的 transaction 接口,更新数据。

欢迎来到这里!

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

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

    因为我模仿思源的 <span data-type="strong">text</span>,刷新完之后就会重置,之前那种方法起码可以保存哈哈哈

    async function replaceSelectedText(protyle) {
        const range = protyle.toolbar.range;
        let selectText = protyle.toolbar.range.toString();
        const textNode = document.createElement('span');
        textNode.setAttribute('data-type', 'strong');
        textNode.innerHTML = `「${selectText}」`;
        range.deleteContents();
        range.insertNode(textNode);
        range.collapse(false); // pass false, the range will collapse to its end point.
        protyle.toolbar.element.classList.add('fn__none'); // close toolbar
    }
    
    1 回复
  • 其他回帖
  • 第一,你的方案是可以执行的,但是会与思源本身的更新逻辑相冲突,所以报错的地方其实是思源自己的代码。

    第二,这个功能想要实现更建议使用 range,我现在使用手机,没法直接打出可用的代码,但我建议你可以看看这个

    第三,不建议直接用思源的方案,他的方案为了解决很多临界问题很复杂,而且没有暴露出接口给插件用。不过,可以肯定的是,思源也是基于 range 的。

    1 回复
  • 不对,我仔细想了一下,transction 这个接口应该是有让你填原本的东西是什么的,不过你显然没有,所以最简单的方案应该是你先更新一遍,然后再前后添加字符并加粗,接着再更新一遍

    1 回复
  • Achuan-2

    谢谢,已经解决了。

    想问问大佬 setInlineMark 有文档吗,我没有找到

    ```js
    async function replaceSelectedText(protyle) {
        const range = protyle.toolbar.range;
        let selectText = protyle.toolbar.range.toString();
        range.deleteContents();
        const replaceText = `「${selectText}」`;
        const textNode = document.createTextNode(replaceText);
        range.insertNode(textNode);
        // range.collapse(false); // pass false, the range will collapse to its end point.
        protyle.toolbar.setInlineMark(protyle, 'strong', 'range');
        // protyle.toolbar.element.classList.add('fn__none'); // close toolbar
    }
    
    
    

    思源数据插件开发.gif

    1 回复
  • 查看全部回帖
Achuan-2
给时间以生命而不是给生命以时间,给我买包辣条https://afdian.net/a/achuan-2 上海

推荐标签 标签

  • V2Ray
    1 引用 • 15 回帖 • 2 关注
  • LaTeX

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

    9 引用 • 32 回帖 • 146 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 135 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    138 引用 • 268 回帖 • 130 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    54 引用 • 85 回帖
  • API

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

    76 引用 • 429 回帖
  • TensorFlow

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

    20 引用 • 19 回帖
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    130 引用 • 793 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 194 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖 • 1 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖
  • VirtualBox

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

    10 引用 • 2 回帖 • 7 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖
  • 安全

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

    191 引用 • 813 回帖 • 1 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 533 回帖 • 735 关注
  • BAE

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

    19 引用 • 75 回帖 • 616 关注
  • Facebook

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

    4 引用 • 15 回帖 • 458 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖
  • 持续集成

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

    14 引用 • 7 回帖 • 5 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • ZeroNet

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

    1 引用 • 21 回帖 • 609 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1234 回帖 • 442 关注
  • 服务

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

    41 引用 • 24 回帖
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 613 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 648 关注