slate.js拼音输入法的光标错位及Safari/Edge下无法输入问题
目前,slate编辑器对中文拼音输入法的支持并不好,主要存在两个问题
- 比较轻的问题,在Chrome下,拼音可以输入,但是光标位置没有跟随移动
- 在Safari或者Edge(windows)中,甚至经常无法输入中文
其实解决方法在项目issue中零散都已经有了,但是相关代码一直没有被合入,可能是因为解决方法不完美?
对于第一个问题,这一个PR的方法可以解决。通过修改packages/slate-react/src/components/content.js
文件,增加一个临时的isComposing标记是否是拼音正在输入。如果是拼音正在输入,表现为屏幕上可以看到相应的英文字母打下去,并且处于选中状态。slate本来这里有一个针对选中状态的处理代码,这个导致光标没有移动。因此用isComposing变量加以判断即可解决。
对于第二个问题,在这个issue中有人提到了一个解决方法,判断如果是这一类浏览器,则手动插入文本。其中的judgeNeedInsertText
方法作者没有详细描述,可以用下面的代码:
function judgeNeedInsertText() {
return event.nativeEvent && HAS_INPUT_EVENTS_LEVEL_2;
}
由于上述解决方法都是直接修改代码,因此除了重新发一个npm包以外,好像没有什么很好的办法。因此可以直接fork官方项目,进行修改后自己发一个包。我已经做了这一步,如果你需要临时使用,可以直接替换掉slate-react
,改为@wangsijie/slate-react
import { Editor } from '@wangsijie/slate-react';
但是这会导致无法跟上官方的版本更新,因此这只能作为一个临时的方法,建议观察官方的发布动态。
文章原始链接:https://sijie.wang/posts/slate-chinese-input
本站文章除特别声明外,均采用
CC BY-NC-SA 4.0
许可协议,转载请保留原始链接