欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

解决slate编辑器在safari下的兼容问题及中文输入法光标问题-个人文章-SegmentFault思否

程序员文章站 2022-07-03 16:01:46
前言 用过 slate 编辑器的都知道它对于中文输入有以下兼容性问题: 在 chrome 下,输入中文是,编辑区的光标始终停在拼音的前面(不影响输入,但体验很糟) 在 safar...

前言

用过 slate 编辑器的都知道它对于中文输入有以下兼容性问题:

在 chrome 下,输入中文是,编辑区的光标始终停在拼音的前面(不影响输入,但体验很糟) 在 safari 等支持 onbeforeinput 方法的浏览器下(has_input_events_level_2)无法使用输入法输入中文

gitbook 使用的也是 slate 编辑器,但它对 slate 底层做了很多修改,解决了这些问题。在我对比 gitbook/slate 与 slate 时,没有找到解决方案。

后来,我在 slate 的 issue 里查找该问题,找到了一些不错的回答。

环境:slate 0.47.1 slate-react 0.22.1

光标停留在拼音前的问题

参考 pull request 。找到相关源代码,修改即可。

按照上述代码修改之后,发现光标问题解决了,且 safari 浏览器下也有了一些小变化:输入法能正常工作了,但是最后的输入内容不会输入到 浏览器内。

safari 输入问题

参考 issue 。最后面用户 hudk114 的评论里有提到,需要在 oncompositionend 时,根据是否需要插入数据(has_input_events_level_2 为真时),调用 edit.inserttext 插入数据。

这样写就行:

const issynthetic = !!event.nativeevent
if (issynthetic && has_input_events_level_2){
  editor.inserttext(event.data);
}

修改了这两处之后,输入中文的问题即可解决。