前端大佬进,我发现了一个 CKEditor5 非常容易复现且长期存在无人修复的 BUG
最近在公司的一个项目中引入了 CKEditor5 ,本来想着知名项目应该不会有什么大问题。
但是在发布后,同事测试随手输入一个中文句号,编辑器竟然显示了两个。
然后我就去官网 demo 上测试,也可以复现。
复现步骤:
1.Windows 系统下( macOS 等其他系统无法复现)使用浏览器打开 ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html
2.全选清空浏览器的内容(重要步骤)
3.切换到中文符号,键盘输入一个中文句号(。)
(浏览器版本: Microsoft Edge 106.0.1370.52 ,操作系统版本: Windows 11 21H2 )
然后就能得到两个“。”
我目前提了 issue ,但是 CKEditor 的人还没回复。
复现视频:
user-images.githubusercontent.com/17821872/198577151-fb5b5125-515d-4e6d-a4e6-2f03018aca6a.mp4
补充一下:使用的是系统自带的微软拼音
我上周跟同事说了国产富文本编辑器都是垃圾,只有这个才是高级货。
现在好尴尬!
目前打算在change事件里面replace一下("。。"=>"。"),先把这个问题应付过去。
根据36楼的提示,做了一个简单的处理,目前可以正常输入了。
1、编辑器创建后添加以下代码,为每个段落插入时增加一个零宽字符。
const model = editor.model;
const doc = editor.model.document;
doc.on('change:data',function () {
const changes = doc.differ.getChanges();
model.change(function (writer) {
for (var i = 0; i < changes.length; i++) {
var entry = changes[i]
if (entry.type == 'insert' && entry.name == 'paragraph') {
const paragraph = entry.position.nodeAfter;
writer.insertText(String.fromCharCode(8203), paragraph, 'end');
}
}
});
});
2、读取编辑器内容时,删除零宽字符。
var data = editor.getData()
data = data.replace(/\u200B/g, '')
不只是。,其他的中文标点也存在类似的问题,看上去是和开启了输入法的标点配对差不多,光标自动定位到了两个符号的中间。
确实可以复现
你用的什么输入法,windows 自带输入法没有复现
试了好多遍都无法复现,系统 Windows 10 LTSC 2021 ,自带的中文输入法
实测 edge 有这个毛病,chrome 没有
Edge 复现成功,Chrome 复现成功,火狐复现失败。
Firefox Yes
复现了,包括拼音输入法输入汉字,存在字母被输两次的情况
我测试是有:。 [] ¥ 三个字符存在这个问题
微软拼音
我这边使用 Chrome 106.0.5249.121 可以复现
全角下所有字符都能复现
chrome
还真的是
反复测试后补充一下:
1.必须是输入框全空时,输入第一个字符为中文符号。
2.非必现,存在一定概率,但概率较高,体感至少 80%触发。
3.输入法应该无关,测试微软拼音和 QQ 拼音均复现。
4.浏览器,很奇怪 Firefox 反复测试都不触发,难道是 Chromium 的锅?
5.用输入法的软键盘输入符号,同样会触发。
6.用拼音打 juhao ,选择候选词中的句号来输入,不会触发。
不止三个,所有中文符号都会触发
中文的都能复现,跑去看了一下 issues 记录,五月份就有人反馈了相似的 issue ,9 天前已经标记了商业许可用户上报了这个问题了,所以应该很快有 release 解决这个问题了
github.com/ckeditor/ckeditor5/issues/11805
微软拼音输入法复现了。
linux chrome 未复现
firefox yes!
建议使用 tinymce
🐮批我的茶
这个东西对 composition 的支持一直都有问题
天坑,
估计官方修改了 会引入别的问题
win10 完全无法复现,试试 tiny 吧
Windows 11 Microsoft Edge 版本 107.0.1418.26 (正式版本) (64 位) 未复现
ckeditor 的中文输入法兼容问题很早就有了
还真是的
tinymce 才是高级货好吗。。。
我捣鼓过不少编辑器。中日韩输入法都容易有 bug 。像拼音,有的平台输入时,没选字之前,是没有内容进入输入框的。而有的平台,你打字的时候,字母就已经进输入框了。英语不存在这种问题,作者自然也懒得管,或者低优先级管。
windows 11 ,chrome 106.0.5249.119 ,微软输入法, 成功复现!
CKE 旧版漏洞满天飞
新版有空捣鼓下
不止句号,基本上中文符号都会重复。有时候试下读源码去解决。
对头,比如 github.dev 之前用 mspy 就有这个情况
win10 ltsc 2021 自带输入法,中文状态,107.0.5304.88 没有复现
slate yyds
这个 bug 很久了
富文本编辑我选择 Lexical ,ProseMirror 也行
quilljs.com/
这个也不错啦
edge google 复现 firefox yes
win11 中文输入法 chrome 106.0.5249.62 版本 yes
现在版本已经是优化过了,以前连输入文字都会重复。
这种情况一般是 顶格输入,就是前面没有字符的时候会出现。有一个临时解决方案就是在输入开头的地方加一个英文的空格, 在 html 里放一个 (或者 ) 用户在这个空格之后输入,就没有问题。
我测试是不止是顶格输入时候会出现,如果另起个新段落(
)重新输入会再次出现这个 bug 。如何取的Java源代码文件中文件名和行号:) 在C/C++的程序,编译器提供了两个宏来支持取得源文件中的行号和文件名,这两个宏是__FILE__,__LINE__ 你可以如下的…
本文来自读者“程序猿石头”的投稿文章《这 10 行比较字符串相等的代码给我整懵了,不信你也来看看》,原文写的很好,但不够直接了当,信息密度不够高,所以我对原文进行大量的删减、裁…
背景:一个代码仓库存在两个版本同时开发的场景,比如当前基于 develop 分支,拉了两个分支 dev_1.0 和 dev_1.1 。现在 dev_1.0 的功能开发完成了,测…