这是一个系列博客,最终目的是要做一个基于 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.22 Feature:通过键盘输入英文

为了实现键盘输入,我们需要在container div元素(canvas父元素)中插入一个input(或者textarea)元素,作为代理,来捕获键盘相关事件。

所以,我们先来重构下代码。

2.22.1 重构

2.22.1.1 让Editor获取container HTML元素

首先,修改src/demo/App.tsx,将传入new CanvasTextEditor()中的canvas元素替换为div元素:

然后,修改Editor

同时,修改Store的构造函数,在其中存储container元素:

2.22.1.2 在Store中初始化和存储光标

然后,我们希望input元素可以读取到光标的位置。但是,目前光标是作为Editor的property存在的,并不方便读取。所以,就需要将光标提取到store中。

接下来,我们开始实现feature.

2.22.2 在点击文字时,记录下光标的必要信息

在点击文字时:

记录下光标的如下信息,存储到Store中:

  • cursorIdxInChars:光标在所有chars中,处于第几的位置
  • curParaIdx:光标在第几个段落
  • cursorIdxInCurPara:光标在当前段落中,处于第几的位置

同时,顺便记录下目标字符的如下样式信息,存储到光标实例上,方便以后插入字符时使用:

  • color
  • fontSize

2.22.3 处理英文输入逻辑

BlinkingCursor初始化时,根据需要插入input元素。

然后,当input元素的input事件触发后:

  • 根据键盘输入的字符,新建Char,并插入全局chars列表和当前段落chars列表
  • 重新计算每个段落的布局,以便于:重新生成SoftLine和计算chars位置
  • 将光标移动到新插入的字符后面

2.22.4 效果

(未完待续)

从零开始,开发一个 Web Office 套件(10):捕获键盘事件,输入文字的更多相关文章

  1. 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器

    书接前文: 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Of ...

  2. 从零开始, 开发一个 Web Office 套件 (3): 鼠标事件

    这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...

  3. 从零开始, 开发一个 Web Office 套件(4):新的问题—— z-index

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...

  4. 《从零开始, 开发一个 Web Office 套件》系列博客目录

    这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...

  5. 从零开始,开发一个 Web Office 套件(12):删除文字 & 回车换行

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  6. 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器

    这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 富文本编辑器 万里长征 ...

  7. 从零开始,开发一个 Web Office 套件(5):Mouse hover over text

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...

  8. 从零开始,开发一个 Web Office 套件(6):光标 & Click 事件

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office ...

  9. 从零开始,开发一个 Web Office 套件(7):新的问题—— Click 事件的 z-index

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

随机推荐

  1. Base64补充

    1.Base64简单说明 描述:Base64可以成为密码学的基石,非常重要. 特点:可以将任意的二进制数据进行Base64编码 结果:所有的数据都能被编码为并只用65个字符就能表示的文本文件. 65字 ...

  2. java命令-(学习)jstack 工具

    一.介绍 jstack是java虚拟机自带的一种堆栈跟踪工具.jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项&qu ...

  3. cocos命令生成apk

    1. 配置好cocos命令中需要的andrid 环境命令 2. adt或许没有 zipalign.exe, 在生成 release版中需要这个文件来生成apk (路径D:\adt\sdk\tools) ...

  4. [转]API性能测试基本性能指标及要求

    原文链接http://blog.csdn.net/strawbingo/article/details/46458959 指标的基本概念 1.事务(Transaction) 在web性能测试中,一个事 ...

  5. Java静态变量、静态块、构造块、构造函数、main函数、普通代码块的执行顺序

    测试代码 public class SingleTest { public static String v = "StaticValue"; static { System.out ...

  6. 手把手带你基于嵌入式Linux移植samba服务

    摘要:Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成. 本文分享自华为云社区<嵌入式Linux下移植samba服务--<基于北斗和4G ca ...

  7. 模块random+os+sys+json+subprocess

    模块random+os+sys+json+subprocess 1. random 模块   (产生一个随机值) import random 1 # 随机小数 2 print(random.rando ...

  8. 主机磁盘使用率超过85%导致es索引变为只读模式

    [ type=cluster_block_exception, reason=index [ index_name ] FORBIDDEN/12/index read-only / allow del ...

  9. [theHunterCOTW] 猎人荒野的召唤-一点资料

    游戏介绍 购买建议 [2020-12-17] theHunter 现在有三个捆绑包 2019 Edition,2021 Edition,Complete Collection 单独购买,目前steam ...

  10. [旧][Android] ButterKnife 浅析

    备注 原发表于2016.05.08,资料已过时,仅作备份,谨慎参考 前言 自上星期写 Retrofit 写吐之后 ... 我问大队长能不能换个其他什么东西写,大队长就说了个单词 ButterKnife ...