登录 注册

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

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

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

  • 思源笔记

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

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

    23020 引用 • 92599 回帖
  • Q&A

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

    8449 引用 • 38491 回帖 • 155 关注
上海 位置
200 悬赏
1 收藏
15 回帖
9
6
879 127 19 706 10 4 11

相关帖子

被采纳的回答
  • 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.yuque.com/achuan-2 上海
回帖
951
 帖子
241
 积分
1669

近期热议

推荐标签 标签

  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 483 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    58 引用 • 22 回帖
  • BND

    BND（Baidu Netdisk Downloader）是一款图形界面的百度网盘不限速下载器，支持 Windows、Linux 和 Mac，详细介绍请看这里。

    107 引用 • 1281 回帖 • 34 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言，在 20 世纪 90 年代中期由日本的松本行弘（まつもとゆきひろ/Yukihiro Matsumoto）设计并开发。在 Ruby 社区，松本也被称为马茨（Matz）。

    7 引用 • 31 回帖 • 216 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 410 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    407 引用 • 3578 回帖
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    7 引用 • 40 回帖
  • ngrok

    ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 626 关注
  • IDEA

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

    181 引用 • 400 回帖
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 1 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 672 关注
  • 星云链

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

    3 引用 • 16 回帖 • 6 关注
  • 导航

    各种网址链接、内容导航。

    42 引用 • 175 回帖
  • etcd

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

    5 引用 • 26 回帖 • 528 关注
  • GitLab

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

    46 引用 • 72 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 745 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    51 引用 • 25 回帖
  • 人工智能

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

    135 引用 • 190 回帖
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统，在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 2 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 4 关注
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 363 关注
  • NGINX

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

    313 引用 • 547 回帖
  • 安装

    你若安好，便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 76 关注
  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖
  • 负能量

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

    88 引用 • 1235 回帖 • 410 关注
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 11 关注

最新标签