登录 注册

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

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

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

  • 思源笔记

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

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

    25593 引用 • 105845 回帖 • 1 关注
  • Q&A

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

    9797 引用 • 44540 回帖 • 83 关注
上海 位置
200 悬赏
1 收藏
15 回帖
9
6
1.3k 133 19 912 15 4 185

相关帖子

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

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

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

欢迎来到这里！

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

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

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

    第二，这个功能想要实现更建议使用 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 • via Android
    订阅者 先知

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

  • zxhd86 • via Android
    订阅者 先知

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

  • zxhd86 • via Android
    订阅者 先知

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

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

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

    因为不知道这个 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 • via Android
    订阅者 先知

    刷新后重置是因为数据没有上传，所以你需要模拟一个空的输入事件，或者，直接调用思源 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 • via Android
    订阅者 先知

    嗯，可以试试，

  • zxhd86 • via Android
    订阅者 先知

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

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

    1 回复
  • zxhd86 • via Android
    订阅者 先知

    不对，我仔细想了一下，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
公众号：Achuan同学 上海
回帖
1038
 帖子
252
 积分
1242

近期热议

推荐标签 标签

  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 4 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 183 关注
  • SpaceVim

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

    3 引用 • 31 回帖 • 111 关注
  • Sym

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

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

    524 引用 • 4601 回帖 • 706 关注
  • MongoDB

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

    91 引用 • 59 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • 锤子科技

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

    4 引用 • 31 回帖 • 2 关注
  • 书籍

    宋真宗赵恒曾经说过：“书中自有黄金屋，书中自有颜如玉。”

    78 引用 • 396 回帖
  • 思源笔记

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

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

    25593 引用 • 105845 回帖 • 1 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • gRpc
    11 引用 • 9 回帖 • 94 关注
  • 职场

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

    127 引用 • 1708 回帖
  • Outlook
    1 引用 • 5 回帖 • 3 关注
  • 倾城之链
    23 引用 • 66 回帖 • 167 关注
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    2 引用 • 14 回帖 • 6 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 2 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 791 关注
  • Openfire

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

    6 引用 • 7 回帖 • 108 关注
  • 安装

    你若安好，便是晴天。

    132 引用 • 1184 回帖
  • Hprose

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

    9 引用 • 17 回帖 • 635 关注
  • Kafka

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

    36 引用 • 35 回帖 • 3 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 31 关注
  • H2

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

    11 引用 • 54 回帖 • 667 关注
  • Visio
    1 引用 • 2 回帖 • 1 关注
  • 互联网

    互联网（Internet），又称网际网络，或音译因特网、英特网。互联网始于 1969 年美国的阿帕网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

    99 引用 • 367 回帖
  • 爬虫

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

    106 引用 • 275 回帖
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    199 引用 • 543 回帖 • 4 关注

最新标签