这是一个系列博客,最终目的是要做一个基于 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. Solution -「CF 917D」Stranger Trees

    \(\mathcal{Description}\)   Link.   给定一棵包含 \(n\) 个点的有标号树,求与这棵树重合恰好 \(0,1,\cdots,n-1\) 条边的树的个数,对 \(10 ...

  2. Note -「单位根反演」学习笔记

    \(\mathcal{Preface}\)   单位根反演,顾名思义就是用单位根变换一类式子的形式.有关单位根的基本概念可见我的这篇博客. \(\mathcal{Formula}\)   单位根反演的 ...

  3. NFS共享Nginx网页根目录(自动部署)

    IP HOSTNAME SERVICE SYSTEM 192.168.131.132 proxy-nfs nginx+nfs-server CentOS 7.6 192.168.131.131 ngi ...

  4. C++特殊成员函数及其生成机制

    在C++中,特殊成员函数指的是那些编译器在需要时会自动生成的成员函数.C++98中有四种特殊的成员函数,分别是默认构造函数.析构函数.拷贝构造函数和拷贝赋值运算符.而在C++11中,随着移动语义的引入 ...

  5. 带你掌握Java各种日志框架

    一:日志基本概念及框架 1:什么是日志 Java程序员在开发项目时都是依赖Eclipse/IDEA等集成开发工具的Debug调试功能来跟踪解决Bug,但项目打包部署发布到了测试环境和生产环境怎么办?难 ...

  6. windows server 2016 2019修改远程端口操作

    一.修改3389远程端口 1,按"win+r"快捷键,在对话框中输入regedit 2, 找到路径 \HKEY_LOCAL_MACHINE\SYSTEM\CurrentContro ...

  7. Redis原理再学习04:数据结构-哈希表hash表(dict字典)

    哈希函数简介 哈希函数(hash function),又叫散列函数,哈希算法.散列函数把数据"压缩"成摘要,有的也叫"指纹",它使数据量变小且数据格式大小也固定 ...

  8. Aesop_secret的writeup

    大家好,这次我为大家带来的是攻防世界misc部分Aesop_secret的writeup.    先下载附件,是一个压缩包,紧接着解压,发现一个gif文件.用浏览器打开,注意到这个gif文件播放时每一 ...

  9. SaaS平台是什么,为什么字节、腾讯等大厂都在抢相关人才

    SaaS平台很多人可能没听说是什么,但是从事TO  B公司的员工来说,SaaS平台应该都有所耳闻.从2016年开始,腾讯开始发力TO B算起,到处在挖TO B公司的骨干人才,而熟悉SaaS平台的人才竞 ...

  10. 简单excel饼状图怎么做,bi工具怎么做饼状图

    饼状图是为了在一个整体体现个体所占的比例,比如一块蛋糕每人各分多大份.了解了饼状图的含义,就来学习饼状图怎么做吧. 首先,我们准备excel表格饼状图的初始数据 然后选择excel表格上方的插入,选择 ...