登录 注册

[js] 7.13 [新增]: 批量去除样式!!! 新加背景颜色 / 表格 / 布局等, 编辑器体验全面优化.... 太多功能了 [标题 / 块 / 编辑 的体验史诗级增强]

项目背景

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

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

    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

批量取消样式

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

代码

https://gitee.com/shaoxiayo/siyuan/

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

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

谢谢

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

  • 思源笔记

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

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

    26328 引用 • 109482 回帖
  • 代码片段

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

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

    202 引用 • 1461 回帖 • 1 关注
28 引用
震惊! 历时 3 天, 终于搞定了编辑器快捷选择颜色, 支持批量编辑颜色的功能, 进来拿吧 • shaoxia
OMG. 点选批量清除多行样式, 工具栏体验优化.. • shaoxia
ctrl+\ 清空样式能否支持多个内容块 • shaoxia
ctrl+\ 清空样式能否支持多个内容块 最近使用的外观 Alt + X 求助取消颜色样式 js 增加批量清除样式 如何快速去除大量块的样式？ 能不能先把编辑器的基础功能体验优化好 如何实现代码块聚焦自动展开、失焦自动折叠？ 震惊! 历时 3 天, 终于搞定了编辑器快捷选择颜色, 支持批量编辑颜色的功能, 进来拿吧 自定义“标记”的颜色 鼠标悬停展开颜色面板 一些对思源笔记的建议 [css] 一个修改序号颜色 + 层级显示的 css，但是还是有小毛病 思源编辑器工具栏增加一个下拉框快捷选择标题 / 列表等 请求实现将常用字体颜色修改按钮（如几个高频色块）直接暴露在工具栏上 [js] 显示折叠列表节点下的子节点数 期望思源能在块和标题上做这些改进 任务列表去删除线，文字变灰，代码怎么写？ 请教如何批量选择某个样式或背景的字体并修改？ 怎样一次将几十个 H1 降为 H2 标题？同时带子标题一起降级 怎样一次将几十个 H1 降为 H2 标题？同时带子标题一起降级 如何使某级标题自动处于折叠状态？ 列表序号跨块如何连续生成？ 希望能增加两个列表块合并为一个块的功能 希望能增加两个列表块合并为一个块的功能 希望能增加两个列表块合并为一个块的功能
31 操作
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 更新了该帖
深圳 位置
8 感谢
12 收藏
4 赞同
28 引用
31 操作
9 回帖
3
2
517 345 3 14 1 154

相关帖子

9 回帖
[js] 7.13 [新增]: 批量去除样式!!! 新加背景颜色 / 表格 / 布局等, 编辑器体验全面优化.... 太多功能了 [标题 / 块 / 编辑 的体验史诗级增强]

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • 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
    订阅者 作者

    你喜欢的功能增强了

请输入回帖内容 ...
shaoxia
深圳
回帖
73
 帖子
15
 积分
2