slate.js拼音输入法的光标错位及Safari/Edge下无法输入问题

目前,slate编辑器对中文拼音输入法的支持并不好,主要存在两个问题

  1. 比较轻的问题,在Chrome下,拼音可以输入,但是光标位置没有跟随移动
  2. 在Safari或者Edge(windows)中,甚至经常无法输入中文

拼音错位

其实解决方法在项目issue中零散都已经有了,但是相关代码一直没有被合入,可能是因为解决方法不完美?

对于第一个问题,这一个PR的方法可以解决。通过修改packages/slate-react/src/components/content.js文件,增加一个临时的isComposing标记是否是拼音正在输入。如果是拼音正在输入,表现为屏幕上可以看到相应的英文字母打下去,并且处于选中状态。slate本来这里有一个针对选中状态的处理代码,这个导致光标没有移动。因此用isComposing变量加以判断即可解决。

对于第二个问题,在这个issue中有人提到了一个解决方法,判断如果是这一类浏览器,则手动插入文本。其中的judgeNeedInsertText方法作者没有详细描述,可以用下面的代码:

1
2
3
function judgeNeedInsertText() {
return event.nativeEvent && HAS_INPUT_EVENTS_LEVEL_2;
}

由于上述解决方法都是直接修改代码,因此除了重新发一个npm包以外,好像没有什么很好的办法。因此可以直接fork官方项目,进行修改后自己发一个包。我已经做了这一步,如果你需要临时使用,可以直接替换掉slate-react,改为@wangsijie/slate-react

1
import { Editor } from '@wangsijie/slate-react';

但是这会导致无法跟上官方的版本更新,因此这只能作为一个临时的方法,建议观察官方的发布动态。

文章作者: 王思捷
文章链接: https://sijie.wang/2019/06/20/slate-chinese-input/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 我爱平铺