登录 注册

能不能先把编辑器的基础功能体验优化好

现在的思源的功能已经非常非常多了,好多的功能都不常用

但是有些问题是编辑器的最基础体验功能,我觉得不应该总是叫用户通过 js 库去实现,第一个是有门槛,第二是功能体验很糟糕.

有以下最常用,但是体验很糟糕的问题,希望作者能看一下,改进下用户体验:

  1. 最基本的索引问题.一篇文章的索引不能自动变更,需要不停的用插件去改索引编号,这应该是编辑器最基础的功能,比如下图的索引部分,比如我删除第五行,下面的 6,7,8,到无穷远都没有办法自动变更,我需要手动一个个的拖动,真让人绝望
    微信截图 20250618140813.png
  2. 块的打开/关闭状态,默认文档是记录最外面的标题打开/关闭状态的,但是里面都是打开状态,现在实际情况是一个 h1 下面有 10 多个大块,,大块里面还嵌套若干个列表,如果当前我处于第 1 个块,我需要把块一个个关闭,才能定快速位到我想找的块.
    微信截图 20250618141834.png
    这里让人很痛苦的点是,现在文档越来越长,每天做了大量的 ai 问答摘录,如果我这次把块关闭了,直接点关闭最外面 H1 标题,在点这个 H1 标题(打开)或重新文档,这些块的默认状态又是全部打开的.又要挨个操作一遍长长的文档去关闭块.长文档的体验真的很糟糕.
  3. 标题和有序/无序列表是最常用的功能,每次都要点最左边,然后到最上方,别说用快捷键,我就是基础用户,记不住快捷键,希望能像飞书那样优化一下位置

image.png

微信截图 20250618142408.png

微信截图 20250618142452.png

工具栏里直接出现,如果这样优化,我想普通用户不会再去点最前面的那 3 个小点

谢谢,希望作者/社区贡献者看到能优化下这些用户体验

感激不尽

  • 思源笔记

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

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

    26351 引用 • 109595 回帖
深圳 位置
2 关注
1 赞同
27 回帖
13
8
2
797 428 6 33 1 327

相关帖子

27 回帖
能不能先把编辑器的基础功能体验优化好

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • HugZephyr •
    付费者

    前两个点看起来跟 大纲 很像啊, 要不试下大纲?

    第三点

    思源的 工具栏和右键菜单在我看来是两个东西

    工具栏操作的是, 一个块里面的某些内容

    image.png

    右键菜单操作的是, 这个块

    image.png

    应该无法将右键菜单的内容挪到工具栏, 即使真的可以, 效果也不会太好

    image.png

    1 回复
  • HugZephyr •
    付费者

    右键菜单如果是这样, 确实感觉不错, 不知道有没有大佬搞一搞

    image.png

  • JeffreyChen •
    付费者 支持者 捐赠者

    比如我删除第五行,下面的 6,7,8,到无穷远都没有办法自动变更,我需要手动一个个的拖动

    列表项需要在同一个列表块内才会自动修改序号。

    块的打开/关闭状态,默认文档是记录最外面的标题打开/关闭状态的

    这是个解决不了的技术问题，如果不一起展开下层的折叠块会产生异常，建议不要遮挡标题块，使用大纲来定位。如果必须要用折叠功能，请使用列表块，列表的折叠不受这个问题影响。

    我就是基础用户,记不住快捷键

    建议稍微记一下，会方便很多：

    ## 输入井号加空格，这是标题块
- 输入减号加空格，这是无序列表
1. 输入序号加空格，这是有序列表
    1 回复
  • www766 •
    订阅者 捐赠者 恶龙

    右键菜单列示方式值得借鉴

  • suxiang999 •
    付费者

    关于第二点，我想你大概是需要【快速预览、折叠、定位】

    建议尝试把大纲标题设置不同层级，通过大纲，来折叠展开，或定位你需要的内容

    [js] 右键大纲展开，向上折叠

    第三点的话，可尝试一款名为【Wgestures】的软件

    image.png

    通过鼠标手势，快速设置大纲标题，比如按住右键，往左滑，是一级，往右滑，是二级，往下是三级

    wg 有免费的版本，https://www.yingdev.com/projects/wgestures

    软件相关的介绍也可去 B 站搜下看下的

    1 回复
  • shaoxia •
    订阅者 作者

    你好,第二个不是大纲,是对于我已经看过哪些文章的超链引用 ,我会在每个看过后打个勾

  • shaoxia •
    订阅者 作者

    你好,第二个不是大纲,是对于我已经看过哪些文章的超链引用 ,我会在每个看过后打个勾

  • li156 •
    付费者

    大佬，是否可以给每个块整个状态，标记是否折叠

    或者说，给折叠状态的块增加一个属性，非折叠的块取消这个属性，用于识别折叠状态

    1 回复
  • HugZephyr •
    付费者

    折叠的块有个属性来着, fold="1"

    image.png

    image.png

    3 回复
  • HugZephyr •
    付费者

    我已经将按钮提出来了, 可以体验下

    image.png

    [js] 展开二级菜单 20250619

    5 回复
  • mozhu • • 1 赞同
    订阅者 付费者 支持者 捐赠者

    块菜单多列、斜杆菜单多列这些都是好的优化点，其他的是习惯问题了。

  • JeffreyChen •
    付费者 支持者 捐赠者

    标题和有序/无序列表是最常用的功能,每次都要点最左边,然后到最上方,别说用快捷键,我就是基础用户,记不住快捷键,希望能像飞书那样优化一下位置

    我写了一个 CSS，你可以试一试：

    [css] “转换为”二级菜单上移至一级菜单

    image.png

  • shaoxia •
    订阅者 作者

    大佬我的标签好小,怎么让他变大点啊

    image.png

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

    大佬这个,默认让块打开是关闭状态,怎么修改啊

    没懂你什么意思
    HugZephyr •
  • shaoxia • • 1 评论
    订阅者 作者

    大佬,有没有办法把这些红色的区域给他隐藏,平时重来没用过,只要有那个标题,有序/无序列表就行

    image.png

    1 回复
    CSS 隐藏倒是挺简单的，就是写起来有点繁琐
    JeffreyChen •
  • HugZephyr •
    付费者

    新代码: https://gitee.com/Hug_Zephyr/siyuan_script/blob/master/js/%E5%B1%95%E5%BC%80%E8%8F%9C%E5%8D%95%E9%A1%B9_20250621_111937.js

    调整这个 14, 让他变大变小

    image.png

    调到 20 是这样的

    image.png

  • HugZephyr •
    付费者

    css 代码大概长这样

    /* 人工智能 */
[data-id="ai"],
/* 聚焦 */
[data-id="enter"],
/* 聚焦到上层 */
[data-id="enterBack"],
/* 移动 */
[data-id="move"],
/* 跳转到父块的下一个块 */
[data-id="jumpToParentNext"],
/* 跳转到父块的上一个块 */
[data-id="jumpToParentPrev"],
/* 跳转到父块 */
[data-id="jumpToParent"],
/* 添加到数据库 */
[data-id="addToDatabase"],
/* 微信提醒 */
[data-id="wechatReminder"],
/* 快速制卡 */
[data-id="quickMakeCard"],
/* 布局 */
[data-id="layout"],
/* ocr */
[data-id="ocr"],
/* 宽度 */
[data-id="widthDrag"],
[data-id="width"],
/* 高度 */
[data-id="height"],
/* 分割线 */
[data-id="separator_5"],
#hz_test_id
{
    display: none;
}

    你自己按照需求加一下需要隐藏的元素

    比如 你想隐藏菜单里的 移动, 就这么改

    image.png

    每个菜单项的 data-id 如下图, 是一一对应的,

    image.png

  • shaoxia •
    订阅者 作者

    谢谢大佬,你真是神一样的存在啊..

  • shaoxia • • 1 评论
    订阅者 作者

    大佬,这个能搞吗?这个非常方便

    应该搞不了, 思源本身就不支持这种 选中某些文本, 然后转换类型的操作
    HugZephyr • • 1
  • shaoxia • • 1 评论
    订阅者 作者

    大佬这个折叠的块 fold=1,js 怎么写才能让它默认=0 啊,也就是自动关闭

    手动把它折叠了, 之后应该就一直是折叠的把
    HugZephyr •
  • shaoxia • • 1 评论
    订阅者 作者

    手动折叠后,然后关闭标题,再次打开,他又全部自动打开了,同样,关闭文档,再打开文档,打开标题,它又自动打开了.,

    希望能有个打开文档和标题默认自动折叠状态的

    确实是这样, 我刚发现, 不过不知道你的需求要怎么实现, 我一般都是看大纲
    HugZephyr •
  • shaoxia •
    订阅者 作者

    按照上面这个 html,我写了个 js,作用是获取有 fold 属性的所有的 div,然后打开文档和标题的时候自动关闭,但是我写的不对..我也不会进开发模式看,大佬你能帮忙改改吗..

    (() => {
    function main() {
    whenExist('#commonMenu', menu_ele => {
    // 创建一个 MutationObserver 的实例并定义回调函数
    const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'fold') {
    mutation.target.setAttribute('fold', '1');
    break;
    }
    }
    });

    main()
    })();

    1 回复
  • HugZephyr •
    付费者

    看起来你是想让一些内容自动折叠, 但是核心思路不太对, 因为未折叠的块没有 fold 属性, 所以未折叠的块, 走不进去这个 if, 也就无法设置成折叠

    image.png

    可以看下这个帖子是否符合你的要求

    [js] 批量折叠和展开标题，标题批量转换不再是梦

    如果不符合你的需求, 就发个 悬赏 呗, 看看大佬有没有想法

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

    标题的插件我用了, 挺好的,但是还是需要一个,在哪里发悬赏啊..这个论坛的功能很难用,完全找不到

    1 回复
    请问下用的什么标题插件啊，有什么作用
    siyueyezi •
  • HugZephyr •
    付费者

    PixPin20250627192613.gif

    1 回复
  • shaoxia •
    订阅者 作者

    谢谢大佬,我找到在哪了,昨天今天自己在开发,回头放社区里

  • shaoxia •
    订阅者 作者

    都已经解决了

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

请输入回帖内容 ...
shaoxia
深圳
回帖
76
 帖子
15
 积分
23

近期热议

推荐标签 标签

  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖 • 1 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    730 引用 • 1283 回帖
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 713 关注
  • AWS
    11 引用 • 28 回帖 • 7 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台，致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验，及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 2 关注
  • 导航

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

    45 引用 • 177 回帖
  • Ruby

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

    7 引用 • 31 回帖 • 267 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    108 引用 • 153 回帖
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 53 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 1 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 37 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 684 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念，推广开源项目，为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖 • 1 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    77 引用 • 37 回帖
  • GAE

    Google App Engine（GAE）是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 825 关注
  • OpenCV
    15 引用 • 36 回帖
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    694 引用 • 537 回帖 • 1 关注
  • AngularJS

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

    12 引用 • 50 回帖 • 522 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 37 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 533 关注
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 2 关注
  • NGINX

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

    315 引用 • 547 回帖 • 1 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 395 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    36 引用 • 200 回帖 • 39 关注
  • Openfire

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

    6 引用 • 7 回帖 • 120 关注
  • 禅道

    禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。

    10 引用 • 15 回帖
  • 星云链

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

    3 引用 • 16 回帖 • 2 关注

最新标签