如何从零开始开发 Web Office 套件，实现捕获键盘事件并输入文字的功能？

本文共计712个文字，预计阅读时间需要3分钟。

这是一个系列博客，旨在打造一个基于HTML Canvas的、类似微软Office的Web Office套件（包括文档、表格、幻灯片等）。

这是一个系列博客，最终目的是要做一个基于 HTML Canvas 的、类似于微软 Office 的 Web Office 套件（包括：文档、表格、幻灯片……等等）。
自由互联：《从零开始, 开发一个 Web Office 套件》系列博客目录
富文本编辑器 Github repo 地址：github.com/zhaokang555/canvas-text-editor
富文本编辑器 在线 Demo：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中。