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

前言

用过 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);
}

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