这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的、类似于微软 Office 的 Web Office 套件(包括:文档、表格、幻灯片……等等)。

博客园:《从零开始, 开发一个 Web Office 套件》系列博客目录

富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor

富文本编辑器 在线 Demo:https://zhaokang555.github.io/canvas-text-editor/

2. 富文本编辑器(MVP)

2.26 Feature:删除、替换已选中文字

2.26.1 算法

当我们按下按键时,首先判断下是否有选中文字:

  1. 如果此前已经选中了文字,则:

    1. 删除选中文字
    2. 如果按下的是'Backspace'键,将光标移动到删除位置
    3. 如果按下的是'Enter'键,将本段落从删除位置截断为两段,将光标移动到下一段开头处
    4. 如果输入的是普通文字(无论是否正在使用输入法),从删除位置插入文字
  2. 如果此前没有选中文字,且光标是可见的,则直接进入前文已实现的插入/删除文字逻辑

2.26.2 实现

调用算法:

实现算法:

2.26.3 效果

删除已选中文字:

替换已选中文字:

(未完待续)

从零开始,开发一个 Web Office 套件(13):删除、替换已选中文字的更多相关文章

  1. 从零开始, 开发一个 Web Office 套件(4):新的问题—— z-index

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...

  2. 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器

    书接前文: 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Of ...

  3. 从零开始, 开发一个 Web Office 套件 (3): 鼠标事件

    这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...

  4. 《从零开始, 开发一个 Web Office 套件》系列博客目录

    这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...

  5. 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器

    这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 富文本编辑器 万里长征 ...

  6. 从零开始,开发一个 Web Office 套件(12):删除文字 & 回车换行

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  7. 从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  8. 从零开始,开发一个 Web Office 套件(14):复制、粘贴、剪切、全选

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  9. 从零开始,开发一个 Web Office 套件(5):Mouse hover over text

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...

随机推荐

  1. tip1:学习使用mybatis中使用mysql数据库的基本操作

    1.查看mysql服务是否启动: 2.root用户链接数据库:mysql -u root -p,随后输入正确的密码即可. 3.root用户创建数据库: 4.查看已建数据库:show databases ...

  2. python3发邮件脚本

    官方文档中建议保存token,且token是每2小时更新一次. 所以token先保存在本地token.txt文件夹中,设定计划任务每1小时删除一下token.txt.虽然造成了浪费,对于发消息不多的人 ...

  3. 【windows 操作系统】Windows系统机制之对象管理器

    转载自 Windows系统机制之对象管理器 设计的几个目的: 提供一种公共统一的机制来使用系统资源 将对象保护隔离到OS中的一个地方,从而确保统一的一致的对象访问策略 提供一种机制来管理进程对对象的使 ...

  4. C# 开始支持动态化编程

    在.NET 4.0的运行时进行动态编程时,我们引入了一个新功能:动态语言运行时.可以这样理解,CLR的目的是为静态类型的编程语言提供一个统一的框架或编程模型,而DLR便是在.NET平台上为动态语言提供 ...

  5. 白话OAuth2.0

     一.OAuth是什么 OAuth简写:Open Authorization(开放授权).百度百科上是这么说的:为用户资源提供了一个安全,开放而又简易的标准.解决了密码的反模式问题(第三方应用不需要知 ...

  6. FTP服务器日志解析

    转至:https://blog.csdn.net/weixin_34320724/article/details/92045244 FTP是老牌的文件传输协议,在网络中应用非常广泛.本节就Vsftp服 ...

  7. WPS:公式在中间,编号靠右

    1.新建表格1*3 2.在中间单元格内输入公式,在右边单元格中输入编号 3.在"开始"菜单栏找到"居中"和"靠右"两个按钮,给中间单元格设置 ...

  8. VS Code 启动占用100%Cpu问题解决办法

    打开VS Code之后,点击文件->首选项->设置 search.followSymlinks

  9. JZ-032-把数组排成最小的数

    把数组排成最小的数 题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为3213 ...

  10. MaRVIN

    [ResourceRegistration] 加给Resource类 [ResourceReference(--)] 加给Resource类中引动到的Resource类,引用多个的话用IReferen ...