登录 注册

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

我对 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 动作可以做出来，但我还是希望思源本身有这个功能）

  • 思源笔记

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

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

    18737 引用 • 69989 回帖
  • Q&A

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

    6566 引用 • 29475 回帖 • 247 关注
上海 位置 15 回帖
9
6
448 102 19 319 2 4

相关帖子

被采纳的回答
  • zxhd86 •
    订阅者 先知

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

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • zxhd86 •
    订阅者 先知

    第一，你的方案是可以执行的，但是会与思源本身的更新逻辑相冲突，所以报错的地方其实是思源自己的代码。

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

    选择（Selection）和范围（Range） zh.javascript.info

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

    1 回复
  • Achuan-2 •
    订阅者 先知 作者

    谢谢回复，我试过 range 了，但是不能写入，看了下思源备注增强的代码，他调用的是 toolbar 的 range , 是可以 work 的，还在研究怎么加粗

    async function replaceSelectedText(protyle) {
    const range = protyle.toolbar.range;
    let selectText = protyle.toolbar.range.toString();
    const textNode = document.createElement('strong');
    textNode.innerHTML = `「${selectText}」`;
    range.deleteContents();
    range.insertNode(textNode);
    range.collapse(false); // pass false, the range will collapse to its end point.
    protyle.toolbar.setInlineMark(protyle, 'clear', 'toolbar');
    protyle.toolbar.element.classList.add('fn__none');
}
    4 回复
    2 操作
    Achuan-2 在 2024-01-03 10:51:20 更新了该回帖
    Achuan-2 在 2024-01-03 10:48:14 更新了该回帖
  • zxhd86 •
    订阅者 先知

    加粗的功能倒可以使用思源的接口，备注增强我记得就是这么写的。你的需求是前后插入文本，这个我还真没试过。

  • zxhd86 •
    订阅者 先知

    所以现在这个可以正常使用了吗？

  • zxhd86 •
    订阅者 先知

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

    1 回复
  • zxhd86 • • 1 评论
    订阅者 先知

    话说你这个怎么加粗完又取消加粗了？

    因为不知道这个 api 的作用是啥……
    Achuan-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 回复
  • zxhd86 •
    订阅者 先知

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

    2 回复
  • 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 •
    订阅者 先知 作者

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

    2 回复
  • zxhd86 •
    订阅者 先知

    嗯，可以试试，

  • zxhd86 •
    订阅者 先知

    没有文档哦，我使用这个功能是直接从源码里翻的 😂

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

    1 回复
  • zxhd86 •
    订阅者 先知

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

    1 回复
  • Achuan-2 •
    订阅者 先知 作者

    好的，谢谢

    貌似用 range.insertNode 就不能撤回了

  • Achuan-2 • • 2 评论
    订阅者 先知 作者

    哈哈哈，再次感谢，transction 这个不知道怎么调用，继续用 protyle.toolbar.setInlineMark(protyle, 'clear', 'toolbar'); 来更新，貌似没什么问题

    现在可以撤回加粗和添加的字符了

    async function replaceSelectedText(protyle) {
    const range = protyle.toolbar.range;
    let selectText = protyle.toolbar.range.toString();
    const replaceText = `「${selectText}」`;
    const textNode = document.createTextNode(replaceText);
    // 替换前存储，方便撤回
    protyle.toolbar.setInlineMark(protyle, 'clear', 'toolbar');
    // 替换文本
    range.deleteContents();
    range.insertNode(textNode);
    // 默认加粗
    protyle.toolbar.setInlineMark(protyle, 'strong', 'range');
    // range.collapse(false); // pass false, the range will collapse to its end point.
    protyle.toolbar.element.classList.add('fn__none'); // close toolbar
}
    暂时先上传到 GitHub 备份了，以后有需要再完善吧：https://github.com/Achuan-2/siyuan-plugin-replace
    Achuan-2 •
    那就好，能用就行
    zxhd86 •
请输入回帖内容 ...
Achuan-2
给时间以生命而不是给生命以时间，个人博客https://www.achuan-2.top/ 上海
回帖
537
 帖子
190
 积分
900

近期热议

推荐标签 标签

  • 职场

    找到自己的位置，萌新烦恼少。

    126 引用 • 1699 回帖 • 2 关注
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    164 引用 • 1451 回帖
  • Kafka

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

    35 引用 • 35 回帖 • 1 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    51 引用 • 37 回帖
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    90 引用 • 383 回帖
  • 友情链接

    确认过眼神后的灵魂连接，站在链在！

    24 引用 • 373 回帖
  • IDEA

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

    180 引用 • 400 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    523 引用 • 4581 回帖 • 690 关注
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 4 关注
  • LaTeX

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

    9 引用 • 32 回帖 • 162 关注
  • 服务

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

    41 引用 • 24 回帖 • 7 关注
  • ZooKeeper

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

    59 引用 • 29 回帖 • 21 关注
  • 博客

    记录并分享人生的经历。

    270 引用 • 2386 回帖
  • Docker

    Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。

    476 引用 • 899 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 154 关注
  • Pipe

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

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

    131 引用 • 1114 回帖 • 150 关注
  • 房星科技

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

    6 引用 • 141 回帖 • 562 关注
  • GitLab

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

    46 引用 • 72 回帖 • 2 关注
  • JWT

    JWT（JSON Web Token）是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准（RFC 7519），定义了一种简洁的，自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 21 关注
  • 外包

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

    26 引用 • 232 回帖 • 6 关注
  • Kubernetes

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

    108 引用 • 54 回帖
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 292 关注
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    21 引用 • 58 回帖
  • 阿里云

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

    89 引用 • 345 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    122 引用 • 73 回帖
  • HHKB

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

    5 引用 • 74 回帖 • 407 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时，提供更无缝的用户体验。

    1 引用 • 2 回帖 • 48 关注

最新标签