这是一个系列博客,最终目的是要做一个基于 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. 分享一些访问之后显示本机公网ip的url地址

    http://ip.42.pl/raw https://api.ip.sb/ip http://ip.3322.net http://ip.qaros.com http://ip.cip.cc htt ...

  2. 面向对象—多态、鸭子类型(Day21)

    编程原则java具有自己的编程原则和设计模式,不能多继承.python的编程原则:1.开放封闭原则:开放是对扩展是开放的,封闭是对修改是封闭的(已经写完的代码程序是不能修改的).2.依赖倒置原则:高层 ...

  3. 汇聚优质AR应用开发者,技术助力AR领域繁荣生态

    本文分享于HMS Core开发者论坛<EasyAR--汇聚优质AR应用开发者,技术助力AR领域繁荣生态>采访文字稿 EasyAR空间计算平台为应用开发者提供稳定建图.定位能力和完善工具链, ...

  4. 图解python | for循环

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/56 本文地址:http://www.showmeai.tech/article-det ...

  5. 云原生 PostgreSQL 集群 - PGO:来自 Crunchy Data 的 Postgres Operator

    使用 PGO 在 Kubernetes 上运行 Cloud Native PostgreSQL:来自 Crunchy Data 的 Postgres Operator! Cloud Native Po ...

  6. JVM内存结构的组成、各部分功能作用

    一.程序计数器  作用:是记住下一条jvm指令的执行地址  特点: 是线程私有的 不会存在內存溢出 二.虚拟机栈 每个线程运行时所需要的内存,称为虚拟机栈 每个栈由多个栈帧(Frame) 组成,对应着 ...

  7. cpu 时间片消耗表|cpu消耗表

    1秒=1000毫秒(ms)=1,000,000 微秒(μs)=1,000,000,000 纳秒(ns)=1,000,000,000,000 皮秒(ps) 1个CPU时钟周期=时钟频率 2GHz CPU ...

  8. SQL Server 2005 - 让 SELECT 查詢結果额外增加递增序号

    /* 方法一*/SELECT 序號= (SELECT COUNT(客戶編號) FROM 客戶 AS LiMing                 WHERE LiMing.客戶編號<= Chan ...

  9. linux 下面启动nginx 和关闭nginx

    linux 下面启动nginx 和关闭nginx, 查看linux 开放的所有端口netstat -ntpl,重启服务命令 :service network restart 1 进入到安装的目录里面 ...

  10. [转帖]Linux 下解压 rar 文件

    转至:https://www.cnblogs.com/jinanxiaolaohu/p/13824185.html https://www.cnblogs.com/xuyaowen/p/unrar_f ...