登录 注册

[js] 8.12 [新增]: 批量选择合并块功能.. 太多功能了 [标题 / 块 / 编辑 的体验史诗级增强]

项目背景

  1. 只关注在基础功能的用户体验优化,我自己是使用者,不追求花里胡哨的功能.

  2. 开发花了不少工作外的时间,请尊重原创劳动果实.有新增功能都会在标题更新日期

    8.12 号更新功能

    1. 批量选择块,点击按钮合并多个块
    2. 修复了批量编辑折叠把内部修改的 bug
    3. 修复了批量折叠超纲的 bug

    8.5 号更新功能

    1.把公众号文章转二维码
    2.自动打开聚焦模式下的标题
    3.批量编辑背景颜色
    4.优化标题序号显示
    5.修复严重 bug 若干

    7.13 号更新功能

这个论坛的编辑器糟透了,我连把下面的序号怎们从 1.开始都研究了半天..

编辑器,新增:

  1. 编辑器增加批量去除样式按钮
  2. 编辑增加了表格按钮
  3. 编辑器增加布局功能
  4. 编辑器排版布局/样式相关的用户体验全面优化

bug,修复:

  1. 修复折叠标题连续创建 2 个
  2. 高亮编辑的功能开关问题
  3. 列表上没有应用颜色按钮的问题
  4. 批量颜色按钮把序号清除了
  5. 修复表格没有颜色按钮,以及点颜色按钮消失的问题
  6. 修复标题自动更新的 bug

历史已有功能

标题

  1. 如果标题是折叠的状态,按下 enter 键,自动创建同级标题
  2. 一键打开/关闭同级所有标题
  3. 自动修改标题序列(基于别人的上面改的)

块

  1. 在子序号为空的时候,按下 tab 键,则该行转为段落
  2. 如果是段落,按 tab 键会缩进合并到上方列表里面(不完美,因为 moveblock 会强制全局刷新一次)
  3. 优化列表的箭头颜色
  4. 自动更正错误列表序号,包含列表和段落的序列对齐
  5. 块内如果有任务,自动统计任务显示在序列标题的末尾初
  6. 一键关闭同级块/一键展开块的子模块
  7. 编辑的时候高亮,颜色为红色(整合其他人的包)
  8. 段落高亮编辑特效(结合别人的)

工具栏

  1. 段落/标题新增工具栏编辑
  2. 列表下的段落增加工具栏编辑
  3. 新增工具栏功能整合成下拉框,同时允许自动弹出,高亮等
  4. 批量编辑多个块粗体/斜体/下划线/标注,颜色编辑
  5. 新增批量颜色编辑
  6. 新增编辑器增加颜色快捷点选

美中不足需要官方优化的包括:

1 列表块的拖动排序,经常排列错,多个手势太繁琐,最好是在思源设置里可选,默认只有一个拖动到元素下方(不要还能拖动成了折叠里面的子项目(消失了),还有经常拖动不到下方)

不出意外,后面应该不会再更新新功能,这几个是拿来练手 ai 编程的.....😄😄😄😄

从此江湖上只有哥的传说,而哥已不再江湖,再默默用思源学习..😂😂😂😂😂

编辑器体验全方位增强:新增标题,布局,标题,代码块

PixPin20250713162752.gif

自动打开聚焦模式下的标题块

PixPin20250806205103.gif

识别转存的微信公众号,把链接自动转换为二维码,支持手机扫一扫

PixPin20250806204932.gif

批量编辑背景颜色

PixPin20250806204826.gif

批量取消样式

PixPin20250713162342.gif

编辑器颜色快捷按钮和批量编辑颜色

PixPin20250710190405.gif

在之前一位朋友的 css 基础上改的,主要是增加了如果小题在上面,或者不是从 h1 开始,序号正常显示的支持

PixPin20250710190009.gif

折叠标题创建同级标题

PixPin20250706210348.gif

一键打开/关闭同级所有标题/块

使用方法:

按照 alt+ 点击标题前的小箭头: 打开/关闭同级标题

按住 alt+ 点击块钱的小箭头: 关闭同级列表,展开该列表下的所有块(含子块)

PixPin20250706213029.gif

在子序号为空的时候,按下 tab 键,则该行转为段落

PixPin20250706210703.gif

如果是段落,按 tab 键会缩进合并到上方列表里面

注意: 不完美,因为 moveblock 会强制全局刷新一次,也就只有官方解决这个问题了

PixPin20250706210910.gif

第 7.优化列表的箭头颜色

PixPin20250706211027.gif

第 8.自动更正错误列表序号,包含列表和段落的序列对齐

PixPin20250701000953.gif

块内如果有任务,自动统计任务显示在序列标题的末尾初

PixPin20250706211333.gif

新增工具栏编辑支持段落/标题/列表下的段落

PixPin20250706211522.gif

批量编辑多个块粗体/斜体/下划线/标注(很多人在找的功能吧)

PixPin20250706211740.gif

高亮编辑区

PixPin20250707122050.gif

代码

shaoxia/siyuan: 思源相关插件的开发 shaoxia/siyuan: 思源相关插件的开发 Gitee - gitee.com

如何使用: 点击进去后,看到代码列表,点击进去,到代码详情,一键复制,然后粘贴到你的思源的代码片段里

css 的文件对应 css,js 的对应 js

谢谢

谢谢,写了好久,欢迎鼓励,打赏我..imgv302nnd66d13e2a7c24db89e42bbbe2d265adg.jpg

  • 思源笔记

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

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

    26724 引用 • 111330 回帖 • 1 关注
  • 代码片段

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

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

    225 引用 • 1609 回帖
30 引用
批量把文档的网络图片转本地图片 • shaoxia
思源笔记如何调整多个段落的行内样式, 比如 Ctrl-B，多行加粗 • 5kyfkr
OMG. 历史 1 周，终于搞定了批量清除多行样式, 工具栏体验优化，快进来领取吧.. • shaoxia
震惊! 历时 3 天, 终于搞定了编辑器快捷选择颜色, 支持批量编辑颜色的功能, 进来拿吧 ctrl+\ 清空样式能否支持多个内容块 ctrl+\ 清空样式能否支持多个内容块 最近使用的外观 Alt + X 求助取消颜色样式 js 增加批量清除样式 如何快速去除大量块的样式？ 能不能先把编辑器的基础功能体验优化好 如何实现代码块聚焦自动展开、失焦自动折叠？ 震惊! 历时 3 天, 终于搞定了编辑器快捷选择颜色, 支持批量编辑颜色的功能, 进来拿吧 自定义“标记”的颜色 鼠标悬停展开颜色面板 一些对思源笔记的建议 [css] 一个修改序号颜色 + 层级显示的 css，但是还是有小毛病 思源编辑器工具栏增加一个下拉框快捷选择标题 / 列表等 请求实现将常用字体颜色修改按钮（如几个高频色块）直接暴露在工具栏上 [js] 显示折叠列表节点下的子节点数 期望思源能在块和标题上做这些改进 任务列表去删除线，文字变灰，代码怎么写？ 请教如何批量选择某个样式或背景的字体并修改？ 怎样一次将几十个 H1 降为 H2 标题？同时带子标题一起降级 怎样一次将几十个 H1 降为 H2 标题？同时带子标题一起降级 如何使某级标题自动处于折叠状态？ 列表序号跨块如何连续生成？ 希望能增加两个列表块合并为一个块的功能 希望能增加两个列表块合并为一个块的功能 希望能增加两个列表块合并为一个块的功能
34 操作
shaoxia 在 2025-08-12 13:11:17 更新了该帖
shaoxia 在 2025-08-06 20:52:08 更新了该帖
shaoxia 在 2025-07-29 14:14:34 更新了该帖
shaoxia 在 2025-07-13 17:06:41 更新了该帖 shaoxia 在 2025-07-13 17:05:55 更新了该帖 shaoxia 在 2025-07-13 16:50:31 更新了该帖 shaoxia 在 2025-07-13 16:49:08 更新了该帖 shaoxia 在 2025-07-12 00:45:40 更新了该帖 shaoxia 在 2025-07-12 00:36:47 更新了该帖 shaoxia 在 2025-07-11 16:06:00 更新了该帖 shaoxia 在 2025-07-10 19:07:34 更新了该帖 shaoxia 在 2025-07-07 12:21:08 更新了该帖 shaoxia 在 2025-07-06 23:59:24 更新了该帖 shaoxia 在 2025-07-06 21:35:36 更新了该帖 shaoxia 在 2025-07-06 21:30:49 更新了该帖 shaoxia 在 2025-07-06 21:28:34 更新了该帖 shaoxia 在 2025-07-06 21:27:38 更新了该帖 shaoxia 在 2025-07-01 11:22:50 更新了该帖 shaoxia 在 2025-07-01 11:20:27 更新了该帖 shaoxia 在 2025-07-01 01:44:26 更新了该帖 shaoxia 在 2025-07-01 01:43:26 更新了该帖 shaoxia 在 2025-07-01 01:18:12 更新了该帖 shaoxia 在 2025-07-01 01:17:13 更新了该帖 shaoxia 在 2025-07-01 00:13:06 更新了该帖 shaoxia 在 2025-07-01 00:07:00 更新了该帖 shaoxia 在 2025-06-30 20:17:32 更新了该帖 shaoxia 在 2025-06-29 01:14:36 更新了该帖 shaoxia 在 2025-06-29 01:11:30 更新了该帖 shaoxia 在 2025-06-29 01:10:13 更新了该帖 shaoxia 在 2025-06-29 01:07:36 更新了该帖 shaoxia 在 2025-06-29 01:06:01 更新了该帖 shaoxia 在 2025-06-29 01:03:51 更新了该帖 shaoxia 在 2025-06-29 00:57:44 更新了该帖 shaoxia 在 2025-06-28 14:18:01 更新了该帖
深圳 位置
11 感谢
1 关注
20 收藏
5 赞同
30 引用
34 操作
20 回帖
3
2
2
754 513 3 25 1 212

相关帖子

20 回帖
[js] 8.12 [新增]: 批量选择合并块功能.. 太多功能了 [标题 / 块 / 编辑 的体验史诗级增强]

欢迎来到这里！

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

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

    感谢分享，我也在用练手，给了我很多启发~

  • MasterYS •
    付费者

    支持一下，一下端上来 5 个 JS 嘛

  • 5kyfkr •
    付费者 捐赠者

    自动统计块那个太好用了，非常方便统计任务块个数

  • HugZephyr •
    付费者

    请教一下, 你这个光标所在行怎么搞得

    image.png

    2 回复
  • shaoxia • • 1 评论
    订阅者 作者

    高亮提示在编辑的块,一段 css:

    
.sb:hover {
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15), -2px -2px 6px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.1) !important;
  transition: background-color 0.5s ease-out, box-shadow 0.5s ease-out !important;
}
.p:hover {
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15), -2px -2px 6px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.1) !important;
  transition: background-color 0.5s ease-out, box-shadow 0.5s ease-out !important;
}
.p.highlight {
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5), -2px -2px 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.2) !important;
  transition: background-color 0.5s ease-out, box-shadow 0.5s ease-out !important;
}
.p.highlight:hover {
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5), -2px -2px 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.2) !important;
  transition: background-color 0.5s ease-out, box-shadow 0.5s ease-out !important;
}
​
    这个只能鼠标悬浮高亮吧, 光标所在行高亮怎么做的
    HugZephyr •
  • shaoxia • • 1 评论
    订阅者 作者

    回头吧,js 太多找不到了,我这几天在做基于标题/块的用户体验的一个终极版的升级 js,等做出来会集成进去的

    okk, 谢谢
    HugZephyr •
  • chuchen •

    你现在最新的功能跟我自己预想的也很多类似，但也有不同，比如你是无序列表转段落，但是我希望的刚好有个开关控制的段落转无序列表，也就是默认都是无序列表输入的方式。又比如你的 alt 点击列表关闭同级的，我也有个代码片段版本，然后想如何像 logseq 那样可以点击那个悬浮的竖线控制，谢谢分享，挺有意思

  • Lemon9 •
    付费者

    最喜欢的两个功能，一个是能直接选中后设置颜色，另一个是能实现跨行设置文字颜色，感谢作者

    1 回复
  • shaoxia • via Android
    订阅者 作者

    你喜欢的功能增强了

  • lianhenhei •

    喜欢，感谢作者。

  • Mayrain •

    试用了一下，批量去除样式实在是解我燃眉之急！

    不过似乎代码上有一个小问题，就是用了你的代码片段之后，似乎开始编辑的文段只能从屏幕最下面开始了，而不能从屏幕中间开始，对于打字有些不方便：

    image.png

    image.png

  • 09hzdu •
    付费者

    复制了 gitee 里面的 toolbar，文字样式和标题没有折叠起来

    image.png

    1 回复
  • shaoxia •
    订阅者 作者

    我这边测试了没有你的情况,你把思源升级到最新版,同时把其他 js 和 css 关了测试下,多半是你的 js/css 片段冲突导致的.同时代码只做了 pc 端的测试,手机没有测过

    1 回复
  • 09hzdu •
    付费者

    那应该是。我删了一些代码，发现正常了

  • shawnkurt • via macOS
    付费者

    喜欢 1.2 版本标题 1.1.1 的自动编号样式，于是让 AI 搞了整合版，内容太长发不出来~

    /手动狗头

    这是一个非常棒且有挑战性的任务！它涉及到 CSS 计数器（counter-reset 和 counter-increment）的精细控制，以及理解思源笔记的 DOM 结构和该插件作者的设计思路。

    我的理解和目标：

    • 你已经应用了该作者的 JS 文件，这是基础。
    • 你喜欢 1.2 版本中标题的 层级式编号规则 (例如，一级标题 1，二级标题 1.1，三级标题 1.1.1)。
    • 你希望保留 1.3 版本中除了编号规则之外的 所有其他优化。
    • 1.3 版本的主要变化是：
      • 取消了 H5 标题的计数器递增和显示。
      • 将所有标题的编号规则改成了 独立编号 (例如，H1 是 1，H2 是 1，H3 也是 1，而不是 1.1 或 1.1.1)。
      • 在所有 .before 伪元素的选择器中增加了 :not([data-has-number])，这意味着只有那些没有手动设置序号的标题才会自动编号。这是一个很好的改进，因为它避免了自动编号与手动编号冲突。

    我的计划：

    1. 分析 1.2 和 1.3 版本的差异： 逐行比较两个版本，找出所有不同之处。
    2. 确定要保留 1.2 的部分： 主要是“层级式编号生成规则”部分。
    3. 确定要保留 1.3 的部分： 1.3 版本在“通用计数器样式”和“动态编号适配模块”中引入了 :not([data-has-number]) 选择器，以及对 H5 标题的调整。
    4. 整合： 将 1.3 版本作为基础，然后将 1.2 版本的特定规则（层级编号）覆盖或替换 1.3 版本的相应规则。同时，需要确保 !important 关键字的正确使用，以保证规则生效。
    1 回复
  • shaoxia • via Android
    订阅者 作者

    层级编号有问题。在于如果小标题在大标题前，就会出现 0.0.1 之类的编号。当然标题编号的规则也是个很复杂的事，我是懒的搞了，统一用 1.，2.这样的很省心，可以用就行

    1 回复
  • shawnkurt • via macOS
    付费者

    因为我经常写调研和方案这些层级很多的东西，所以有 1.1.1 这种编号还是挺好的。

    我倒是不觉得出现 0 是什么问题。因为本来如果你在一级标题下面没有二级标题就插入三级标题，那就应该出现二级标题为 0 的情况，一方面提示你 miss 了一个层级，另一方面没有的东西就是 0，没毛病 /狗头

    一些在线文档的逻辑是，即便你中间差了一个层级，也按照 1, 1.1, 1.1.1 的方式编号，这样就很容易导致因为 miss 了层级而让排版变得混乱，我反而觉得这样不好。

    截屏 20250808 上午 9.59.17.png
    截屏 20250808 上午 9.58.59.png

    话说在线文档这种竖向菜单使用习惯了，切换到思源还是需要一点时间适应……

    截屏 20250808 上午 10.00.18.png

    1 引用
    1 操作
    shawnkurt 在 2025-08-08 10:03:16 更新了该回帖
  • 09hzdu • via Linux
    付费者

    标注功能好像不见了。想要制作闪卡，没找到工具栏的标注，试了高亮都不行。

    2 回复
  • shaoxia •
    订阅者 作者

    是隐藏了,你可以重新下 tooleditor.js 代码,我给弄出来了,更新下就有了

  • shaoxia •
    订阅者 作者

    是一行 js 删除就可以了,你可以重新下代码,我更新了下有了

请输入回帖内容 ...
shaoxia
深圳
回帖
83
 帖子
20
 积分
12