从零开始,开发一个 Web Office 套件(11):支持中文输入法(or 其它使用输入法的语言)
这是一个系列博客,最终目的是要做一个基于 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.23 Feature:通过中文输入法,输入中文
2.23.1 基本原理
输入中文(或者其它需要输入法的语言),跟输入英文的不同之处在于:我们通过键盘输入的文字,并不是直接显示在input框里。而是要通过输入法进行映射、选择,再填入input框里。
这里就牵扯到三个事件,我们可以看下MDN文档:
compositionstart
:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/compositionstart_eventcompositionupdate
: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/compositionupdate_eventcompositionend
: https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event
上面的文档里还有demo可以玩儿,通过它可以更好地帮助我们理解这三个事件代表的含义:
同时,我们还需要了解下InputEvent
的以下两个属性:
InputEvent.isComposing
: https://developer.mozilla.org/zh-CN/docs/Web/API/InputEvent/isComposingInputEvent.inputType
: https://developer.mozilla.org/zh-CN/docs/Web/API/InputEvent/inputType
为了更形象地理解这两个属性,我做了一个小demo。对比了输入英文和中文时,这些属性的区别:
2.23.2 算法
- 在我们输入中文过程中,需要在编辑器中插入一些特殊的临时字符。我们称之为TempCompositionChar
- 每当我们按一次键盘:
- 清空上一次插入的所有TempCompositionChar
- 将光标相对字符的位置(
cursorIdxInChars
,cursorIdxInCurPara
)回退 - 插入新的CompositionChars
- 当我们的输入法完成一次输入,将文字填充入input框里时(即:触发compositionend事件时):将TempCompositionChar固定下来,改为CompositionChar
2.23.3 实现
新建CompositionChar
类:
在Store中添加如下方法:
- 插入单个字符
- 批量插入字符
- 清空所有临时字符
- 固定所有临时字符,将其转化为CompositionChar
其中,char.moveCursorToMyRight是我们重构之后,从click回调中抽象出来的函数:
在input事件回调中,判断输入的是英文还是中文,然后调用相关逻辑:
2.23.4 效果
(未完待续)
从零开始,开发一个 Web Office 套件(11):支持中文输入法(or 其它使用输入法的语言)的更多相关文章
- 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器
书接前文: 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Of ...
- 从零开始, 开发一个 Web Office 套件 (3): 鼠标事件
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...
- 从零开始, 开发一个 Web Office 套件(4):新的问题—— z-index
<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...
- 《从零开始, 开发一个 Web Office 套件》系列博客目录
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github r ...
- 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器
这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 富文本编辑器 万里长征 ...
- 从零开始,开发一个 Web Office 套件(7):新的问题—— Click 事件的 z-index
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- 从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- 从零开始,开发一个 Web Office 套件(5):Mouse hover over text
<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...
- 从零开始,开发一个 Web Office 套件(6):光标 & Click 事件
<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office ...
随机推荐
- 【转】 Python生成器generator之next和send运行流程
原文链接:https://blog.csdn.net/pfm685757/article/details/49924099 对于普通的生成器,第一个next调用,相当于启动生成器,会从生成器函数的第一 ...
- 扩展NSDate类实现快捷使用 —— 昉
获取当前日期和时间: +(NSDate *)getCurrentDate{ NSDate *now = [NSDate date]; return now; } 将日期转换为字符串: +(NSStri ...
- 计算机的网络参考模型与5G协议
计算机的网络参考模型与5G协议 1 分层思想 2 OSI参考模型 3 TCP/IP 协议族的组成 4 数据的封装与解封 5 层间通讯过程 6 空口协议 1.喝可乐的人不一定知道其生产的过 ...
- Endnote
#Entnote无法使用Find all test 搜索到sciencedirect的文章(或Elsevier 爱思唯尔) 下面是来自endnote官方论坛的原文Find full text for ...
- atc工具模拟网络
通过Facebook开源的atc工具,进行模拟不同的网络情况,如图: 目前不支持python3 相关网址: ATC http://facebook.github.io/augmented-traffi ...
- JavaScript 的DOM操作详解
内容概要 DOM之查找标签 基本查找 间接查找 节点操作 获取值操作 class操作 样式操作 事件 内置参数this 事件练习 内容详细 DOM操作 DOM(Document Object Mode ...
- Solution -「51nod 1355」斐波那契的最小公倍数
\(\mathcal{Description}\) Link. 令 \(f\) 为 \(\text{Fibonacci}\) 数列,给定 \(\{a_n\}\),求: \[\operatorn ...
- 今天你花里胡哨了吗 --- 定制属于自己的linux ssh迎宾信息
请开始你的表演 linux-oz6w:~ # cat << 'eof' > /etc/profile.d/ssh-login-info.sh #!/bin/sh # 输出一个图像 e ...
- Banmabanma的writeup
大家好,好久不见,前段时间忙于应付网课和作业,还有这恐怖的疫情,差点就嗝屁了...... 好了,接下来我们步入正题,这次我为大家带来攻防世界misc部分Banmabanma的writeup. ...
- ImageNet2017文件介绍及使用
ImageNet2017文件介绍及使用 文件说明 imagenet_object_localization.tar.gz包含训练集和验证集的图像数据和地面实况,以及测试集的图像数据. 图像注释以PAS ...