摘要：前言用过编辑器的都知道它对于中文输入有以下兼容性问题在浏览器下，输入中文是，编辑区的光标始终停在拼音的前面不影响输入，但体验很糟在等支持方法的浏览器下无法使用输入法输入中文使用的也是编辑器，但它对底层做了很多修改，解决了这些问题。
前言
用过 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);
}
修改了这两处之后，输入中文的问题即可解决。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/110205.html
摘要：具体表现是什么样的呢图安卓下不期望的输入行为可以看到，在安卓手机下每次格式化发生的时候，本来应该一直在最后的光标会错格一位，导致连续输入出现问题。 今天要来说的是有关于有数值格式化的场景中，React input 光标的一些异常的表现和对应的处理办法。故事要从一个 issue 说起，有用户反映在使用 NumberField 组件输入时安卓下会出现光标位置异常，导致连续输入会达不到期望的...
摘要：解决页面使用在上滑动卡顿的问题首先你可能会给页面的和增加了然后就可能造成上页面滑动的卡顿问题。页面橡皮弹回效果遮挡页面选项卡有时和的去除掉问题可能就没有了。该行无文字时，光标高度与的一致。 1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案...
摘要：解决页面使用在上滑动卡顿的问题首先你可能会给页面的和增加了然后就可能造成上页面滑动的卡顿问题。页面橡皮弹回效果遮挡页面选项卡有时和的去除掉问题可能就没有了。该行无文字时，光标高度与的一致。 1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案...
摘要：解决页面使用在上滑动卡顿的问题首先你可能会给页面的和增加了然后就可能造成上页面滑动的卡顿问题。页面橡皮弹回效果遮挡页面选项卡有时和的去除掉问题可能就没有了。该行无文字时，光标高度与的一致。 1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案...
阅读 2213·2021-09-27 13:35
阅读 477·2019-08-30 15:55
阅读 749·2019-08-30 15:53
阅读 493·2019-08-30 15:52
阅读 2078·2019-08-30 12:59
阅读 2165·2019-08-29 16:42
阅读 1265·2019-08-26 18:26
阅读 2409·2019-08-26 13:48
