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

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

问题

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

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

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

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

方案

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

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

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

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

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

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

image.png

  • 思源笔记

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

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

    28446 引用 • 119786 回帖
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 回复

推荐标签 标签

  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    200 引用 • 545 回帖 • 1 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 222 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    232 引用 • 484 回帖
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1708 回帖 • 1 关注
  • OnlyOffice
    4 引用 • 41 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    17 引用 • 7 回帖 • 1 关注
  • 叶归
    25 引用 • 100 回帖 • 37 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 63 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 668 关注
  • 星云链

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

    3 引用 • 16 回帖
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    950 引用 • 1460 回帖 • 2 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    293 引用 • 4496 回帖 • 688 关注
  • Mobi.css

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

    1 引用 • 6 回帖 • 799 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 740 关注
  • JavaScript

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

    736 引用 • 1307 回帖 • 2 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    140 引用 • 407 回帖
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    46 引用 • 114 回帖 • 139 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 224 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 736 关注
  • SSL

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

    70 引用 • 193 回帖 • 404 关注
  • 支付宝

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

    29 引用 • 347 回帖 • 2 关注
  • Openfire

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

    6 引用 • 7 回帖 • 133 关注
  • Wide

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

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

    30 引用 • 218 回帖 • 664 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    188 引用 • 833 回帖 • 1 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 1 关注
  • OpenResty

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

    17 引用 • 51 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 702 关注