目标

众所周知，富文本编辑器是前端的一大领域，设计一个通用的，多功能的富文本编辑器不仅仅需要扎实的前端功底，还需要足够的理论知识和架构意识。但千万不要被本系列的标题所迷惑，笔者并不是，也完全没有能力带读者开发一个可靠的、高性能的、多功能的富文本编辑器。之所以选择编辑器作为练手目标，是因为哪怕是实现一个编辑器的最小子集，你也要面对复杂状态管理和错综事件交互，这些场景，恰是 RxJS 发光发热的地方。

本文旨在通过一个实现一个迷你 SQL 编辑器，帮助读者接触、并且练习到更多 RxJS 的 operator，熟悉如何使用 Observable 进行应用建模。另外，也希望探索下，拥有最广泛群众基础的视图层框架 React，其力推的 Hooks ，能否帮助 RxJS 与 React 更加自然的结合。

首先，明确一下我们要实现的 SQL 编辑器功能：

• 基本的中英文输入
• SQL 语法高亮
• 光标闪动
• 光标定位
• 快捷键
• 草稿功能

当实现了具备这些功能的 SQL 编辑器后，你将能收获到：

• 如何使用 RxJS 进行应用建模

• 如何使用 RxJS 与 React Hooks 管理组件状态

• 如何使用 RxJS 与 React Hooks 管理组件事件
• 了解到许许多多 RxJS operator 的用法

接下来，我们开始吧，首先，我们将会创建编辑器组件。