当光标处在非普通文本模式时,为光标设置有显著特征的样式,帮助用户一眼区分接下来输入的文本样式

本贴最后更新于 854 天前,其中的信息可能已经物是人非

问题

在使用几乎所有的 富文本编辑器中,我都会遇到这样一个问题:当前光标处在加粗文本和普通文本之间,再输入新文字,新文字是加粗还是正常文字?

我不知道,反正用肉眼是判断不出来的,只有先输入一个字符看看是什么样式,如果样式不对,就退格,按下快捷键取消加粗。

如果常常需要分出一部分精力去推测当前光标处新文字的样式,对于写作时思维的连续性影响很大。

我相信这不是我一个人遇到过的的问题。

方案

给光标定义两种样式,当它处在正常文本时,是普通样式;当接下来要输入的时带特殊样式的文字,例如:

  • 加粗
  • 斜体
  • 链接标题
  • 行内代码
  • 高亮文本

就变下光标的样式,例如:

  • 变个显眼的颜色
  • 加上渐变色
  • 闪烁速度变快
  • 变粗
  • ……(如何设计更美观,需要探索)

这样就能以最简单有效的方式,表示接下来输入的是带有特殊样式的文字,用户的视线不用离开光标,就能得知接下来输入的文字是加粗、还是普通文本,不再会对光标的状态不清楚了。

示例,将输入光标改为醒目的红色:

image.png

  • 思源笔记

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

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

    17434 引用 • 63198 回帖
1 操作
HaujetZhao 在 2021-10-22 16:48:07 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • HaujetZhao 14 评论

    各个编辑器的处理不一样,比如,下面这个图,你能猜到接下来输入的文字是普通文字还是粗体吗:

    image.png

    它的周围都是普通文字,只是它是从一个加粗文本退格到了那里,还保持着加粗状态,再输入新文字,仍是加粗文字,仅凭肉眼看光标处,根本无法一下子分辨出它接下来要输出的文字是什么样式。

    城然,有其它方法去分辨,例如:

    • 去看工具栏
    • 输入一个字试试

    但不在光标处直接显示接下来输入的格式,而使用这些补丁式的方法,都是对思维连续性的打断,影响创作流。

    有个问题,如果光标颜色变来变去会不会反而影响了用户的写作思路呢?
    Vanessa
    @Vanessa 能够以最简洁的方式 搞清楚编辑器的状态,不用去揣摩编辑器的状态,是减轻了思考负担 。分出一部分心来去思考工具的状态、输入法的状态,相当的降低效率
    HaujetZhao
    @HaujetZhao 问题是按照现在的逻辑,也就是 @Achuan-2 所说的,跳出则为普通文本。用户习惯后跟本不用去考虑状态,反而会被颜色所吸引。
    Vanessa
    @Vanessa 用户生活中用的可不止思源一个编辑器,就算他能把每个光标编辑器的逻辑都记下来,也要分一部分心去判断。
    HaujetZhao
    @Vanessa 你们开发,最大的问题就是前置了一个立场:用户在生活中只使用思源笔记编辑器,用户对思源编辑器的习惯就是对所有编辑器的最高的习惯。
    HaujetZhao
    @HaujetZhao 我们参考了很多笔记软件的。目前的处理和 wolai,notion 基本一致。
    Vanessa
    @Vanessa 更多的人使用 Word 吧,光标逻辑是不是相反 你们网页端 Vditor,光标插到加粗和非加粗之间,这个边界地带,这是属于跳出了行内样式,还是没跳出?此时应当输入什么样式?
    HaujetZhao
    @Vanessa 现实就是,用户将光标插到加粗、普通文本中间时候,有两种倾向:补充加粗文字、补充普通文字。编辑器判断不了,只能默认一种行为。但各个软件的默认行为还不一致。你思源笔记是一个光标处理模式,word 又是一个模式。用户就要判断,我当前是在哪个编辑器,在这个编辑器中光标放到这里时输入的是加粗还是普通文本。人脑的缓冲本来就弱,加入这一揣摩过程,许多输入过程的思绪被严重打乱,尤其是当判断错误,需要退格,用快捷键调整格式,再次输入时候。
    HaujetZhao
    @HaujetZhao Vditor 具体要看编辑模式了,我电脑上没有 Word,稍后去老板电脑上学习一下 😊 其实还是习惯问题,用 word 的人可能不会是我们的用户 😄
    Vanessa
    @Vanessa 你看下链滴现在的所见即所得模式,插入后就是默认输入粗体。用 word 的人可能不用你们的笔记软件。但用你们笔记软件的每个人肯定生活中多多少少要用 word
    HaujetZhao
    @HaujetZhao 感觉 typora 的即使渲染模式使用标记符作为分割可以完美的解决这个问题
    Vanessa
    @Vanessa 但是光标会跳动位置,同时性能受限,跳动有延迟,文字越多,延迟越大,我把光标放链接后,要等他 1 秒完成光标跳动,再输入文字,很是头疼。这个帖子已经说了,变个光标颜色就能解决的事。Typora 的方案一比,反而显得复杂不好用了。
    HaujetZhao
    @HaujetZhao 我觉得应该再征求一下其他用户的意见,如果说已经习惯了的,再去变颜色就会分散注意力,还要去想这个颜色是什么意思。
    Vanessa
    @Vanessa 最通用的方案是一个设置项:光标普通状态的颜色、特殊状态的颜色。不喜欢变色的,就两个状态都调成一样的颜色,喜欢的,就调成两个喜爱的、个性的颜色
    HaujetZhao 1
  • 其他回帖
  • 所见即所得没有不能区分的问题的,比如行内样式只要光标跳出了,再输入就是普通样式

    1 回复

推荐标签 标签

  • Mac

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

    164 引用 • 594 回帖
  • 星云链

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

    3 引用 • 16 回帖 • 7 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 114 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 593 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 32 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    157 引用 • 529 回帖 • 3 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 66 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 31 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 632 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    472 引用 • 892 回帖
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    83 引用 • 165 回帖 • 94 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    9 引用 • 82 回帖 • 1 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 2 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 574 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 11 关注
  • 学习

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

    158 引用 • 469 回帖
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 6 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 626 关注
  • NGINX

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

    310 引用 • 546 回帖 • 82 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    69 引用 • 190 回帖 • 500 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 23 关注
  • JVM

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

    178 引用 • 120 回帖
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    83 引用 • 134 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    19 引用 • 31 回帖 • 1 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    21 引用 • 22 回帖 • 6 关注
  • 阿里云

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

    89 引用 • 345 回帖
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 478 关注