这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor 书接前文: 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器 2. 富文本编辑器(MVP) 2.11 鼠标事件 这篇文章, 我们来实现迄今为止我们需要的鼠标事件…
书接前文: 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor 2.5 观察一下幻灯片中的文本框 我们发现: 一个文本框中有若干行文字 一行文字中每个字符的大小,…
<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor 2. 富文本编辑器(MVP) 2.13 z-index 2.13.1 新的问题 上一篇博客中, 我们实现了mouse…
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器 从零开始, 开发一个 Web Off…
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 富文本编辑器 万里长征的第一步: 我们先开发一个基于canvas的富文本编辑器. 之后, 这个编辑器可以用在我们所有类型的文档中(文档, 表格, 幻灯片...). 对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor 1. Environ…
<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor 2. 富文本编辑器(MVP) 2.16 光标 我们先来实现一个闪烁的光标,就像下面这样: 2.16.1 绘制静止的光标 首先,创…
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一个 Web Office 套件>系列博客目录 富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor 2. 富文本编辑器(MVP) 2.18 Click 事件的 z-index 2.18.1 新的问题:点击空白处 首…
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一个 Web Office 套件>系列博客目录 富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor 上一节我们初步完成了拖动选中文字的feature,不过还遗留了一些 edge case.这篇文章我们来处理它们.…
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一个 Web Office 套件>系列博客目录 富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor 富文本编辑器 在线 Demo:https://zhaokang555.github.io/canvas-text-…
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一个 Web Office 套件>系列博客目录 富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor 富文本编辑器 在线 Demo:https://zhaokang555.github.io/canvas-text-…