这是一个系列博客,最终目的是要做一个基于 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文档:

上面的文档里还有demo可以玩儿,通过它可以更好地帮助我们理解这三个事件代表的含义:

同时,我们还需要了解下InputEvent的以下两个属性:

为了更形象地理解这两个属性,我做了一个小demo。对比了输入英文和中文时,这些属性的区别:

2.23.2 算法

  1. 在我们输入中文过程中,需要在编辑器中插入一些特殊的临时字符。我们称之为TempCompositionChar
  2. 每当我们按一次键盘:
    1. 清空上一次插入的所有TempCompositionChar
    2. 将光标相对字符的位置(cursorIdxInCharscursorIdxInCurPara)回退
    3. 插入新的CompositionChars
  3. 当我们的输入法完成一次输入,将文字填充入input框里时(即:触发compositionend事件时):将TempCompositionChar固定下来,改为CompositionChar

2.23.3 实现

新建CompositionChar类:

在Store中添加如下方法:

  • 插入单个字符
  • 批量插入字符
  • 清空所有临时字符
  • 固定所有临时字符,将其转化为CompositionChar

其中,char.moveCursorToMyRight是我们重构之后,从click回调中抽象出来的函数:

在input事件回调中,判断输入的是英文还是中文,然后调用相关逻辑:

2.23.4 效果

(未完待续)

从零开始,开发一个 Web Office 套件(11):支持中文输入法(or 其它使用输入法的语言)的更多相关文章

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

    书接前文: 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Of ...

  2. 从零开始, 开发一个 Web Office 套件 (3): 鼠标事件

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

  3. 从零开始, 开发一个 Web Office 套件(4):新的问题—— z-index

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...

  4. 《从零开始, 开发一个 Web Office 套件》系列博客目录

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

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

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

  6. 从零开始,开发一个 Web Office 套件(7):新的问题—— Click 事件的 z-index

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  7. 从零开始,开发一个 Web Office 套件(9):拖动鼠标选中文字 Edge Case

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  8. 从零开始,开发一个 Web Office 套件(5):Mouse hover over text

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office ...

  9. 从零开始,开发一个 Web Office 套件(6):光标 & Click 事件

    <从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office ...

随机推荐

  1. Redis源码简要分析

    转载请注明来源:https://www.cnblogs.com/hookjc/ 把所有服务端文件列出来,并且标示出其作用:adlist.c //双向链表ae.c //事件驱动ae_epoll.c // ...

  2. Struts2中的过滤器

    过滤器:            过滤器可以处理用户的请求和程序响应的内容,可用于权限控制.编码转换的场合.过滤器是servlet规范中的一部分,不是只有Struts2有. 使用过滤器之前你得定义一个过 ...

  3. Shell for&while中的循环

    #!/usr/bin/ksh #数字段形式 for i in {1..10} do echo $i done #详细列出(字符且项数不多) for File in 1 2 3 4 5 do echo ...

  4. 04.python语法入门--基本数据类型

    # python是一门解释型的.强类型的.动态语言​​# 一:数字类型# 1.1 整型int:记录人的年龄.等级.号码.个数# age = 18# print(type(age))​# 1.2 浮点数 ...

  5. Solution -「POJ 3710」Christmas Game

    \(\mathcal{Decription}\)   Link.   定义一棵圣诞树: 是仙人掌. 不存在两个同一环上的点,度数均 \(\ge 3\).   给出 \(n\) 棵互不相关的圣诞树,双人 ...

  6. c++ struct enum union加typedef与不加typedef

    struct/enum/union加typedef与不加typedef 匿名结构体 struct { int a; int b; } v; // 这里表示定义了一个结构体的变量v,且结构体类型没有名字 ...

  7. c++ StrVec等效vector(string)的类

    c++ StrVec等效vector<string>的类 知识点 静态成员变量要在类外定义和初始化 allocator类是使用和uninitialized_copy的配合使用,实现stri ...

  8. maven私有仓库从搭建到使用

    因工作需要,需要搭建公司自己的私有仓库,存储自己的私有jar包,所以研究了下 一.环境准备 1.下载并安装nexus,然后启动项目,这部分攻略网上很多,而且基本上都是正确的,此处不做梳理 2.登录12 ...

  9. [题解]UVA10129 Play on Words

    链接:http://vjudge.net/problem/viewProblem.action?id=19492 描述:单词接龙 思路:求欧拉回路或欧拉道路. 首先建图,以字母为节点,单词为边.因为单 ...

  10. iOS 通知扩展插件

    iOS 通知扩展插件 目录 iOS 通知扩展插件 Notification Service Extension 新建一个target 代码实现 注意事项 UINotificationConentExt ...