这是一个系列博客,最终目的是要做一个基于 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. 解决UIWebView内存不释放问题

    走访很多朋友,查阅了很多资料发现UIWebView这尼玛就是个坑,有人说是sdk自带的bug....... 所以一个新的方法诞生了#import <WebKit/WebKit.h> WKW ...

  2. mysql基础复习(SQL语句的四个分类),

                                                                                                       ( ...

  3. 为什么用Python,高级的Python是一种高级编程语言

    Python特性 如果有人问我Python最大的特点是什么,我会毫不犹豫地告诉他:它简单易学,功能强大.作为一个纯自由软件,Python有许多优点: 很简单.基于"优雅".&quo ...

  4. oj教程--贪心

    贪心算法(又称贪婪算法)是指,在对问题求解时,总是做出在当前看来是最好的选择.也就是说,不从整体最优上加以考虑,他所做出的是在某种意义上的局部最优解. 贪心算法不是对所有问题都能得到整体最优解,关键是 ...

  5. 使提示框居中显示&自定义提示框

    ToastActivity.java文件: 1 public class ToastActivity extends AppCompatActivity { 2 private Button mbtn ...

  6. 查询性能提升3倍!Apache Hudi 查询优化了解下?

    从 Hudi 0.10.0版本开始,我们很高兴推出在数据库领域中称为 Z-Order 和 Hilbert 空间填充曲线的高级数据布局优化技术的支持. 1. 背景 Amazon EMR 团队最近发表了一 ...

  7. 用NSoup解析HTML

    1.在NuGet程序包中添加NSoup包 public static void TestNSoup(string urlStr) { WebClient wc = new WebClient(); b ...

  8. JavaScript与C#互通的DES加解密算法的实现(转)

    本文提供了一个能使JavaScript与C#互通的DES加解密算法的实现,在前台页面中用JavaScript版本的DES算法将数据加密之后,传到服务器端,在服务器端可用C#版本的DES解密算法将其解密 ...

  9. deepin 字符集安装

    deepin字符集安装 编辑 目录介绍 /usr/share/i18n/charmaps 这个目录下存放了该Linux操作系统可用字符集的安装包,如果你的操作系统上没有安装某个字符集可以到这个目录下寻 ...

  10. iOS 产品新需求,要让collectionView 的背景跟着Cell 一块儿动!!!

    标题如上!看如何解决 最近产品经理来需求了,就像标题上的一样,要求,给collectionView添加一个背景,并且这个背景,还能跟着cell滑动这么一个效果,这个需求把我看懵了,让我不知所措,这该如 ...