从零开始,开发一个|从零开始,开发一个 Web Office 套件(13)(删除、替换已选中文字)
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的、类似于微软 Office 的 Web Office 套件(包括:文档、表格、幻灯片……等等)。2. 富文本编辑器(MVP) 2.26 Feature:删除、替换已选中文字 2.26.1 算法
博客园:《从零开始, 开发一个 Web Office 套件》系列博客目录
富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor
富文本编辑器 在线 Demo:https://zhaokang555.github.io/canvas-text-editor/
当我们按下按键时,首先判断下是否有选中文字:
- 如果此前已经选中了文字,则:
- 删除选中文字
- 如果按下的是'Backspace'键,将光标移动到删除位置
- 如果按下的是'Enter'键,将本段落从删除位置截断为两段,将光标移动到下一段开头处
- 如果输入的是普通文字(无论是否正在使用输入法),从删除位置插入文字
- 如果此前没有选中文字,且光标是可见的,则直接进入前文已实现的插入/删除文字逻辑
调用算法:
文章图片
实现算法:
【从零开始,开发一个|从零开始,开发一个 Web Office 套件(13)(删除、替换已选中文字)】
文章图片
2.26.3 效果
删除已选中文字:
文章图片
替换已选中文字:
文章图片
(未完待续)
推荐阅读
- JavaScript|JavaScript 事件循环(1) —— 从 setTimeout 说起
- 2022招聘季|从招聘方的角度理解求职
- python|python 爬虫课程-零基础小白三周21天搞定Python分布爬虫课程全套
- java|iOS 高刷屏监控 + 优化(从理论到实践全面解析)
- Python从入门到精通|【Python 百练成钢】分解质因数、龟兔赛跑、时间转换、完美的代价、芯片测试
- Python从入门到精通|【Python 百练成钢】卡片游戏、铁轨问题、移动小球
- Python从入门到精通|【Python 百练成钢】高精度加法、阶乘计算、矩阵幂运算、矩阵面积交
- 开发|2017年,阿里巴巴开源的那些事
- 搞笑整活系列|Python基础-“百钱百鸡”入门逻辑题(刚开始的建议藏起来)
- 按钮组件