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

本贴最后更新于 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 引用 • 77725 回帖 • 2 关注
  • Q&A

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

    7017 引用 • 31711 回帖 • 220 关注

相关帖子

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

欢迎来到这里!

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

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

    发现撤回还有一点点问题,撤回只会撤回加粗,前后添加的字符是不会撤回的,所以我应该在添加字符后先更新,再加粗吗?

    2 回复
  • 其他回帖
  • 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 回复
  • 没有文档哦,我使用这个功能是直接从源码里翻的 😂

    还有一种比较简单的做法是你打开控制台,然后在思源的 main.js 里面搜索 setinlinemark 这个函数名,找到他定义的位置,打断点,然后直接调用一遍功能,读一下参数,就能够知道你需要的功能怎么样传参了

    1 回复
  • 等等,看了下你的代码,思源中的加粗并不是用 document.createElement('strong') 啊……它是用 span 加 class 搞出来的。而且加粗可以直接使用思源接口,你直接用 setinlinemark 就行

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

推荐标签 标签

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1083 引用 • 3461 回帖 • 257 关注
  • 自由行
    1 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 429 关注
  • 禅道

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

    6 引用 • 15 回帖 • 182 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 48 关注
  • 人工智能

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

    77 引用 • 159 回帖
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    35 引用 • 35 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 31 回帖 • 8 关注
  • Quicker

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

    26 引用 • 85 回帖
  • Python

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

    536 引用 • 672 回帖
  • 创业

    你比 99% 的人都优秀么?

    83 引用 • 1398 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖 • 1 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    386 引用 • 1226 回帖 • 593 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • ActiveMQ

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

    19 引用 • 13 回帖 • 641 关注
  • 开源中国

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

    7 引用 • 86 回帖
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    103 引用 • 126 回帖 • 443 关注
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    20 引用 • 245 回帖 • 239 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    923 引用 • 936 回帖
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    16 引用 • 7 回帖 • 1 关注
  • Love2D

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

    14 引用 • 53 回帖 • 520 关注
  • LeetCode

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

    209 引用 • 72 回帖
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 3 关注
  • 运维

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

    148 引用 • 257 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 94 关注