这是一个系列博客,最终目的是要做一个基于 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. c++ TextQuery程序

    TextQuery程序 我写的第一个版本 返回的是map<size_t, string>这个数据量很大,效率低下. TextQuery.h #inlucde<vector> # ...

  2. Dubbo服务注册到Zookeeper,对外提供服务的实际类 ref(如:SleepServiceImpl)保存在哪里

    Dubbo服务注册到Zookeeper,其注册的内容为实际对外提供的服务的实现.这个实现保存在哪里(至于具体客户端使用时怎么取后后续阐述)?可以看看Dubbo如何处理的. 对于@DubboServic ...

  3. 在sublime上运行node

    1.安装node,这个就简单了,不多说了.默认会安装在C盘,也可以自己设定盘符,如D.E 2.打开Sublime Text -> Tools -> Build -> Build Sy ...

  4. OpenGL ES 3D空间中自定义显示空间

    在Android中,我们所熟知的是在ES管线中,其在图元装配时,会进行图元组装与图元分配,这样就回剪裁出来视景体中的物体.但是如果我想在3D场景中规定一个区域,凡是在这个区域中的物体就能显示出来,非这 ...

  5. IP网络主动测评系统——IT运维人员的好帮手

    一.前 言 随着计算机网络的普及和快速发展,互联网已经融入到人们的衣食住行等方方面 面,如工作.购物.音视频聊天.视频会议.朋友圈.抖音.在线网游.网络电影 电视等.毫不夸张地说,现如今大部分人的绝大 ...

  6. RFC3918协议测试——网络测试仪实操

    一.简介1.RFC3918简介历史· 在1999年3月成为正式标准 功能· 评测网络互连设备或网络系统的性能· 网络设备: 交换机,路由器- 内容· 定义了一整套测试方法,为不同厂家的设备/系统提供了 ...

  7. 快速安装与配置kubernetes集群搭

    Kubernetes是什么? 首先,它是一个全新的基于容器技术的分布式架构领先方案.这个方案尽然很新,但它是谷歌十几年以来大规模应用容器技术的经验积累和升华的一个重要成果.确切地说,kubernete ...

  8. containerd与kubernetes集成部署

    概念介绍 cri (Container runtime interface) cri is a containerd plugin implementation of Kubernetes conta ...

  9. 【VS 2022】给vs2022 添加类设计图

    一.安装 1.开始菜单>找到  visual studio installer,单击打开 2.点击修改 3.在单个组件选项卡找到 类设计图 ,选择后点击安装 二.使用 1.右键要查看的项目-&q ...

  10. idea教程--如何申请免费的ideaIDE

    开始申请前请先到 https://www.jetbrains.com/zh/student/ 阅读免费学生授权的介绍和常见问题,再依照下方流程进行申请. (1)到 https://www.jetbra ...