登录 注册

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

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

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

  • 思源笔记

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

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

    22020 引用 • 87808 回帖 • 2 关注
  • Q&A

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

    7935 引用 • 36301 回帖 • 168 关注
上海 位置
200 悬赏
1 收藏
15 回帖
9
6
780 121 19 627 7 4

相关帖子

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

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

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

欢迎来到这里！

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

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

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

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

    https://zh.javascript.info/selection-range

    第三，不建议直接用思源的方案，他的方案为了解决很多临界问题很复杂，而且没有暴露出接口给插件用。不过，可以肯定的是，思源也是基于 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.yuque.com/achuan-2 上海
回帖
765
 帖子
220
 积分
108

近期热议

推荐标签 标签

  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 625 关注
  • CentOS

    CentOS（Community Enterprise Operating System）是 Linux 发行版之一，它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码，因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 154 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储，专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 526 关注
  • 爬虫

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

    106 引用 • 275 回帖
  • 正则表达式

    正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • SVN

    SVN 是 Subversion 的简称，是一个开放源代码的版本控制系统，相较于 RCS、CVS，它采用了分支管理系统，它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 683 关注
  • Jenkins

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

    53 引用 • 37 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点；但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中，从而不再需要读写 HDFS，因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 561 关注
  • API

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

    77 引用 • 429 回帖 • 2 关注
  • 新人

    让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
    新手上路，请谨慎驾驶！

    52 引用 • 228 回帖
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 53 关注
  • 安装

    你若安好，便是晴天。

    132 引用 • 1184 回帖
  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    84 引用 • 139 回帖
  • Redis

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

    286 引用 • 248 回帖 • 74 关注
  • Sublime

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

    10 引用 • 5 回帖 • 1 关注
  • PWA

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

    14 引用 • 69 回帖 • 150 关注
  • 创业

    你比 99% 的人都优秀么？

    84 引用 • 1399 回帖 • 1 关注
  • ActiveMQ

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

    19 引用 • 13 回帖 • 668 关注
  • ZeroNet

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

    1 引用 • 21 回帖 • 637 关注
  • JWT

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

    20 引用 • 15 回帖 • 6 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本，加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较（vimdiff）、语法高亮、全面的帮助系统、本地脚本（Vimscript）和便于选择的可视化模式。

    29 引用 • 66 回帖 • 5 关注
  • 资讯

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

    55 引用 • 85 回帖
  • 房星科技

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

    6 引用 • 141 回帖 • 584 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖 • 1 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 726 关注
  • MongoDB

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

    90 引用 • 59 回帖 • 4 关注

最新标签