登录 注册

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

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

  • 思源笔记

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

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

    18913 引用 • 70896 回帖
  • Q&A

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

    6613 引用 • 29663 回帖 • 250 关注
上海 位置 15 回帖
9
6
464 102 19 335 2 4

相关帖子

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

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

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Achuan-2 •
    订阅者 先知 作者

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

    2 回复
  • 其他回帖
  • zxhd86 •
    订阅者 先知

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

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

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

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

    1 回复
  • 查看全部回帖
Achuan-2
给时间以生命而不是给生命以时间，个人博客https://www.achuan-2.top/ 上海
回帖
572
 帖子
195
 积分
67

近期热议

推荐标签 标签

  • Telegram

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

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

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖 • 91 关注
  • Hprose

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

    9 引用 • 17 回帖 • 600 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 443 关注
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 111 关注
  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 383 回帖 • 2 关注
  • 安全

    安全永远都不是一个小问题。

    189 引用 • 813 回帖 • 1 关注
  • OnlyOffice
    4 引用 • 18 关注
  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖
  • 正则表达式

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

    31 引用 • 94 回帖
  • 反馈

    Communication channel for makers and users.

    123 引用 • 906 回帖 • 195 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 3 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    133 引用 • 3655 回帖
  • 电影

    这是一个不能说的秘密。

    120 引用 • 597 回帖
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    330 引用 • 614 回帖 • 2 关注
  • 友情链接

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

    24 引用 • 373 回帖
  • 职场

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

    126 引用 • 1699 回帖
  • 互联网

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

    96 引用 • 330 回帖
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”，乌云众测平台认证的“安全云”，为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 509 关注
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 1 关注
  • abitmean

    有点意思就行了

    • 24 关注
  • Openfire

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

    6 引用 • 7 回帖 • 87 关注
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    162 引用 • 473 回帖
  • V2Ray
    1 引用 • 15 回帖
  • IDEA

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

    180 引用 • 400 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    534 引用 • 3528 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 19 关注

最新标签