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

2022-03-16 19:22:42

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

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

对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor

2.5 观察一下幻灯片中的文本框

我们发现:

一个文本框中有若干行文字
一行文字中每个字符的大小, 样式都可能不一样 (废话)
- 但是, 上一篇文章中, 我们设置样式, 是以行为对象的
任意一个单独的字符, 都可以用鼠标选中 (废话)
- 但是, 上一篇文章中, 我们计算文字包围盒, 是以行为整体计算的
一行文字如果过长, 可以自动折行(默认行为, 可以修改)
当我调整文本框的宽度, 折行位置随之改变
文本框的位置和宽高都是可以调整的.

为了将来我们的web slides中能够用上CanvasTextEditor, 我们需要重构一下我们的代码.

2.6 重构Editor

修改src/core/CanvasTextEditor.ts, 为编辑器加上位置属性, 宽高属性, 样式属性:

修改src/demo/App.tsx, 给编辑器传入位置信息:

修改src/core/CanvasTextEditor.ts:

实现render函数, 渲染一个临时边框:

添加renderBorderCirclor函数, 渲染边框上的8个圆形控制点:

最终效果:

2.7 设计Editor的整体架构

如下图所示:

一张幻灯片(Slide)中可能有多个编辑器(Editor), 一个编辑器中可能有多个段落(Paragraph), 一个段落中可能有多行(SoftLine), 一行中可能有多个字符(Char).

2.8 自顶向下实现

接下来, 我们按照自顶向下的方式, 来一步步实现这个架构:

2.8.1 Paragraph

修改src/core/CanvasTextEditor.ts, 添加一个字段 paragraphs:

其中, 每个Paragraph要接收这几个参数:

chars: Char[]
canvas context
left
top
maxWidth

为什么Paragraph的构造函数里, 要直接接收Char列表, 而不是SoftLine列表呢?

因为一个SoftLine并不是真正的一行, 而是根据每个Char的宽度和Paragraph的maxWidth, 实时计算出来的.

我们以后将会实现这样的feature: 如果用户调整了Editor的大小, Paragraph的maxWidth随之改变, 所有的SoftLine都会重新计算. 类似下图一样:

新建文件src/core/CanvasTextEditorParagraph.ts

如上图, 在构造Paragraph时, 我们需要实现2个逻辑:

calcLayoutForSoftLines:
- 根据maxWidth, 将所有的Char进行分组, 得到softLines. (类似我们上一篇中的splitContentIntoLines方法)
- 根据每个softLine中的Chars的大小, 计算每个softLine的大小
calcLayout:
- 根据每个softLine的大小, 计算Paragraph的大小

然后, 我们来实现这两个逻辑: