思源笔记格式刷插件开发笔记

最近看社区有格式刷需求,以及自己也有需求,因此开发了格式刷插件:Achuan-2/siyuan-plugin-formatPainter: Use the format painter to batch apply styles (github.com)

觉得好用的欢迎点个 star

思源笔记格式刷插件.gif

自己没正经学过 js,很大部分靠 GPT 实现的代码

下面整理下自己的开发笔记,欢迎大家互相交流学习

开发笔记

  • ❓ 如何设置选中内容的样式 protyle.toolbar.setInlineMark

    • 设置行内块样式
      // datatype:"kbd", "text", "strong", "em", "u", "s", "mark", "sup", "sub", "code"
      this.protyle.toolbar.setInlineMark(this.protyle, datatype, "range");
      
    • 设置背景颜色
      this.protyle.toolbar.setInlineMark(this.protyle, "text", "range", {
          "type": "backgroundColor",
          "color": backgroundColor
      });
      
    • 设置字体颜色
      this.protyle.toolbar.setInlineMark(this.protyle, "text", "range", {
          "type": "color",
          "color": color
      });
      
    • 设置字体大小
      this.protyle.toolbar.setInlineMark(this.protyle, "text", "range", {
          "type": "fontSize",
          "color": fontSize
      });
      
    • 输入 style,如何自动设置背景色、字体色、字体大小
      const { backgroundColor, color, fontSize } = parseStyle(this.formatData.style);
      // console.log(backgroundColor, color, fontSize);
      
      if (backgroundColor) {
          this.protyle.toolbar.setInlineMark(this.protyle, "text", "range", {
              "type": "backgroundColor",
              "color": backgroundColor
          });
      }
      
      if (color) {
          this.protyle.toolbar.setInlineMark(this.protyle, "text", "range", {
              "type": "color",
              "color": color
          });
      }
      
      if (fontSize) {
          this.protyle.toolbar.setInlineMark(this.protyle, "text", "range", {
              "type": "fontSize",
              "color": fontSize
          });
      }
      }
      
      
      function parseStyle(styleString) {
          const styles = styleString.split(';').filter(s => s.trim() !== '');
          const styleObject = {};
      
          styles.forEach(style => {
              const [property, value] = style.split(':').map(s => s.trim());
              styleObject[property] = value;
          });
      
          return {
              backgroundColor: styleObject['background-color'],
              color: styleObject['color'],
              fontSize: styleObject['font-size']
          };
      }
      
  • ❓ 如何获取选中文本的样式,并且如果返回的节点是 span,则提取出其 data-type 和 style 内容

    对数学公式块做了特别处理,因为数学公式块的的 range.startContainer 是它前面的节点而不是它自己,会导致获取节点错误。

    function getSelectedParentHtml() {
        const selection = window.getSelection();
        if (selection.rangeCount > 0) {
            const range = selection.getRangeAt(0);
            let selectedNode = range.startContainer;
            const endNode = range.endContainer;
    
            // 检查 endNode 的 previousSibling
            if (endNode.previousSibling && endNode.previousSibling.nodeType === Node.ELEMENT_NODE) {
                const previousSibling = endNode.previousSibling;
                if (previousSibling.tagName.toLowerCase() === "span" && previousSibling.classList.contains("render-node")) {
                    selectedNode = previousSibling;
                }
            }
    
            let parentElement = selectedNode.nodeType === Node.TEXT_NODE ? selectedNode.parentNode : selectedNode;
            while (parentElement && !parentElement.hasAttribute("data-type")) {
                parentElement = parentElement.parentElement;
            }
    
            if (parentElement && parentElement.tagName.toLowerCase() === "span") {
                const result = {
                    html: parentElement.outerHTML,
                    datatype: parentElement.getAttribute("data-type"),
                    style: parentElement.getAttribute("style")
                };
                // 清空选区
                selection.removeAllRanges();
                return result;
            }
        }
        // 清空选区
        selection.removeAllRanges();
        return null;
    }
    
  • ❓ 设置格式刷模式

    • 设置格式刷模式变量:搞一个变量 FormatPainterEnable,默认为 false,点击时如果为 false,则获取选中文本的其 data-subtype 和 style 内容,FormatPainterEnable=true。
    • 之后选中文本并抬起鼠标后进行格式刷操作:监听 mouseup 和 window.getSelection();
    • 按 esc 键,退出格式刷模式,设置 FormatPainterEnable=false:监听 esc 键按下,如果 FormatPainterEnable=true 则设置为 false;
  • ❓ 如何进入格式刷和退出格式刷模式推送信息

    import {
        fetchPost,
    } from "siyuan";
    
    // 进入格式刷模式
    fetchPost("/api/notification/pushErrMsg", { "msg": this.i18n.enable, "timeout": 7000 });
    // 退出格式刷模式
    fetchPost("/api/notification/pushMsg", { "msg": this.i18n.disable, "timeout": 7000 });
    
    
  • ❓ 点击格式刷,如何关闭工具栏?

    // 关闭toolbar
    // 选择所有具有 .protyle-toolbar 类的元素
    const toolbarElements = document.querySelectorAll('.protyle-toolbar');
    
    // 遍历选中的元素
    toolbarElements.forEach(element => {
        // 检查元素是否没有 .fn__none 类
        if (!element.classList.contains('fn__none')) {
            // 如果没有 .fn__none 类,则添加它
            element.classList.add('fn__none');
        }
    });
    
    
  • ❓ 如何修改光标
    用 css 修改,因为 js 修改如果新打开窗口,就不方便再修改了

    • 启动格式刷时,给 body 添加自定义属性 formatPainterEnable=true, 通过 css 更改光标
    • 禁用格式刷,给 body 添加自定义属性 formatPainterEnable=false,通过 css 改回光标
    body[data-format-painter-enable="true"] .protyle-wysiwyg {
      cursor: url("plugins/siyuan-plugin-formatPainter/assets/formatPainter_mouse2.png"), auto;
    }
    
    body[data-format-painter-enable="false"] .protyle-wysiwyg {
      cursor: auto;
    }
    
  • 思源笔记

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

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

    24466 引用 • 100034 回帖 • 1 关注
3 操作
Achuan-2 在 2024-10-11 13:40:40 更新了该帖
Achuan-2 在 2024-10-11 11:26:05 更新了该帖
Achuan-2 在 2024-10-11 11:17:39 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • jidenanian

    感谢思源有你,思源未来会越来越好

  • 其他回帖
  • EmptyLight

    给个猜想:行内数学公式的样式主要是用 $$ 包裹构成的,不需要单独设置样式,可以前后添加数学公式的标志转换成数学公式。

    既然有了这个思路,行内代码也是差不多的道理,添加代码的标志(`)包裹起来也可以达到效果。

    思路具体没有测试过,可能需要通过 api 获取当前块内容,添加标志,然后通过 api 写回块。不然可能会有一点保存问题?

    1 回复
  • Achuan-2

    目前是可以设置数学公式样式,但问题是我不知道当前选中的内容是不是数学公式

    我目前的方式获取当前选中文字的父块,但对于行内数学公式,得到的块却是前面的行内块,而不是它的父块

  • Achuan-2

    自己写的加脚注插件,用块引实现,把生成的脚注统一放在一个文档里,没上集市,和集市的备注增强插件差不多,根据我需要自定义样式和存放位置

  • 查看全部回帖

推荐标签 标签

  • 学习

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

    171 引用 • 513 回帖
  • Rust

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

    58 引用 • 22 回帖 • 1 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    325 引用 • 1395 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    171 引用 • 414 回帖 • 376 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 159 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    167 引用 • 595 回帖
  • Q&A

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

    9230 引用 • 41960 回帖 • 123 关注
  • AngularJS

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

    12 引用 • 50 回帖 • 497 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 179 关注
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 1 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 4 关注
  • 链书

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

    链书社

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

    14 引用 • 257 回帖
  • Mobi.css

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

    1 引用 • 6 回帖 • 754 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 489 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    125 引用 • 826 回帖
  • 小说

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

    31 引用 • 108 回帖
  • Shell

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

    124 引用 • 74 回帖 • 1 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 250 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • MongoDB

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

    90 引用 • 59 回帖 • 4 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 214 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 1 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 1 关注
  • 阿里云

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

    84 引用 • 324 回帖
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖