V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
vone
V2EX  ›  程序员

前端大佬进,我发现了一个 CKEditor5 非常容易复现且长期存在无人修复的 BUG

  •  
  •   vone · 2022-11-02 10:20:40 +08:00 · 4739 次点击
    这是一个创建于 512 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近在公司的一个项目中引入了 CKEditor5 ,本来想着知名项目应该不会有什么大问题。 但是在发布后,同事测试随手输入一个中文句号,编辑器竟然显示了两个。

    然后我就去官网 demo 上测试,也可以复现。

    复现步骤:

    1.Windows 系统下( macOS 等其他系统无法复现)使用浏览器打开 https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html

    2.全选清空浏览器的内容(重要步骤)

    3.切换到中文符号,键盘输入一个中文句号(。)

    (浏览器版本: Microsoft Edge 106.0.1370.52 ,操作系统版本: Windows 11 21H2 )

    然后就能得到两个“。”

    我目前提了 issue ,但是 CKEditor 的人还没回复。

    复现视频:

    https://user-images.githubusercontent.com/17821872/198577151-fb5b5125-515d-4e6d-a4e6-2f03018aca6a.mp4

    第 1 条附言  ·  2022-11-02 11:00:06 +08:00

    补充一下:使用的是系统自带的微软拼音

    我上周跟同事说了国产富文本编辑器都是垃圾,只有这个才是高级货。

    现在好尴尬!

    目前打算在change事件里面replace一下("。。"=>"。"),先把这个问题应付过去。

    xHmnOO.png

    第 2 条附言  ·  2022-11-03 12:22:51 +08:00

    根据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, '')
    
    第 3 条附言  ·  2022-12-26 09:41:56 +08:00
    官方回复问题已修复。

    In version 35.3.0 we introduced enhancements and fixes for IME, so this bug should be already fixed.

    https://github.com/ckeditor/ckeditor5/releases/tag/v35.3.0
    40 条回复    2022-11-03 10:01:50 +08:00
    Mogugugugu
        1
    Mogugugugu  
       2022-11-02 10:27:38 +08:00   ❤️ 1
    不只是。,其他的中文标点也存在类似的问题,看上去是和开启了输入法的标点配对差不多,光标自动定位到了两个符号的中间。
    liubaicai
        2
    liubaicai  
       2022-11-02 10:29:43 +08:00   ❤️ 1
    确实可以复现
    zzl22100048
        3
    zzl22100048  
       2022-11-02 10:31:02 +08:00   ❤️ 1
    你用的什么输入法,windows 自带输入法没有复现
    edis0n0
        4
    edis0n0  
       2022-11-02 10:32:58 +08:00   ❤️ 1
    试了好多遍都无法复现,系统 Windows 10 LTSC 2021 ,自带的中文输入法
    chrawsl
        5
    chrawsl  
       2022-11-02 10:37:58 +08:00   ❤️ 1
    实测 edge 有这个毛病,chrome 没有
    shintendo
        6
    shintendo  
       2022-11-02 10:39:33 +08:00   ❤️ 3
    Edge 复现成功,Chrome 复现成功,火狐复现失败。
    Firefox Yes
    sankemao
        7
    sankemao  
       2022-11-02 10:43:57 +08:00   ❤️ 1
    复现了,包括拼音输入法输入汉字,存在字母被输两次的情况
    vone
        8
    vone  
    OP
       2022-11-02 10:45:25 +08:00
    @Mogugugugu 我测试是有:。 [] ¥ 三个字符存在这个问题

    @zzl22100048 微软拼音

    @chrawsl 我这边使用 Chrome 106.0.5249.121 可以复现
    holouser
        9
    holouser  
       2022-11-02 10:49:43 +08:00   ❤️ 1
    全角下所有字符都能复现
    chrome
    xling
        10
    xling  
       2022-11-02 10:55:47 +08:00   ❤️ 1
    还真的是
    shintendo
        11
    shintendo  
       2022-11-02 11:00:11 +08:00   ❤️ 4
    反复测试后补充一下:
    1.必须是输入框全空时,输入第一个字符为中文符号。
    2.非必现,存在一定概率,但概率较高,体感至少 80%触发。
    3.输入法应该无关,测试微软拼音和 QQ 拼音均复现。
    4.浏览器,很奇怪 Firefox 反复测试都不触发,难道是 Chromium 的锅?
    5.用输入法的软键盘输入符号,同样会触发。
    6.用拼音打 juhao ,选择候选词中的句号来输入,不会触发。
    shintendo
        12
    shintendo  
       2022-11-02 11:00:43 +08:00   ❤️ 1
    @vone 不止三个,所有中文符号都会触发
    running17
        13
    running17  
       2022-11-02 11:04:44 +08:00   ❤️ 1
    中文的都能复现,跑去看了一下 issues 记录,五月份就有人反馈了相似的 issue ,9 天前已经标记了商业许可用户上报了这个问题了,所以应该很快有 release 解决这个问题了
    running17
        14
    running17  
       2022-11-02 11:05:00 +08:00   ❤️ 1
    wangxiaoaer
        15
    wangxiaoaer  
       2022-11-02 11:06:40 +08:00   ❤️ 1
    微软拼音输入法复现了。
    hcwhan
        16
    hcwhan  
       2022-11-02 11:08:45 +08:00   ❤️ 1
    linux chrome 未复现
    timpaik
        17
    timpaik  
       2022-11-02 11:15:18 +08:00 via Android   ❤️ 2
    firefox yes!
    sheeta
        18
    sheeta  
       2022-11-02 11:17:23 +08:00   ❤️ 1
    建议使用 tinymce
    liuNew
        19
    liuNew  
       2022-11-02 11:20:46 +08:00   ❤️ 1
    🐮批我的茶
    ericls
        20
    ericls  
       2022-11-02 11:22:59 +08:00 via iPhone   ❤️ 1
    这个东西对 composition 的支持一直都有问题
    zhuangzhuang1988
        21
    zhuangzhuang1988  
       2022-11-02 11:31:41 +08:00   ❤️ 1
    天坑,
    估计官方修改了 会引入别的问题
    eroko
        22
    eroko  
       2022-11-02 11:31:53 +08:00   ❤️ 1
    win10 完全无法复现,试试 tiny 吧
    SunsetShimmer
        23
    SunsetShimmer  
       2022-11-02 12:20:09 +08:00   ❤️ 1
    Windows 11 Microsoft Edge 版本 107.0.1418.26 (正式版本) (64 位) 未复现
    superrichman
        24
    superrichman  
       2022-11-02 12:29:19 +08:00 via Android   ❤️ 1
    ckeditor 的中文输入法兼容问题很早就有了
    andrew2558
        25
    andrew2558  
       2022-11-02 12:30:51 +08:00   ❤️ 1
    还真是的
    wunonglin
        26
    wunonglin  
       2022-11-02 12:38:20 +08:00   ❤️ 1
    tinymce 才是高级货好吗。。。
    ChefIsAwesome
        27
    ChefIsAwesome  
       2022-11-02 12:48:43 +08:00 via Android   ❤️ 1
    我捣鼓过不少编辑器。中日韩输入法都容易有 bug 。像拼音,有的平台输入时,没选字之前,是没有内容进入输入框的。而有的平台,你打字的时候,字母就已经进输入框了。英语不存在这种问题,作者自然也懒得管,或者低优先级管。
    scyuns
        28
    scyuns  
       2022-11-02 12:59:14 +08:00   ❤️ 1
    windows 11 ,chrome 106.0.5249.119 ,微软输入法, 成功复现!
    PMR
        29
    PMR  
       2022-11-02 13:27:43 +08:00 via Android   ❤️ 1
    CKE 旧版漏洞满天飞
    新版有空捣鼓下
    Felldeadbird
        30
    Felldeadbird  
       2022-11-02 13:28:45 +08:00   ❤️ 1
    不止句号,基本上中文符号都会重复。有时候试下读源码去解决。
    MoeMoesakura
        31
    MoeMoesakura  
       2022-11-02 13:31:56 +08:00   ❤️ 1
    @ChefIsAwesome 对头,比如 github.dev 之前用 mspy 就有这个情况
    cslive
        32
    cslive  
       2022-11-02 14:05:38 +08:00   ❤️ 1
    win10 ltsc 2021 自带输入法,中文状态,107.0.5304.88 没有复现
    likunyan
        33
    likunyan  
       2022-11-02 14:08:34 +08:00   ❤️ 1
    slate yyds
    IamJ
        34
    IamJ  
       2022-11-02 18:07:04 +08:00 via iPhone   ❤️ 1
    这个 bug 很久了
    LiYechao
        35
    LiYechao  
       2022-11-02 19:26:03 +08:00   ❤️ 1
    富文本编辑我选择 Lexical ,ProseMirror 也行
    of2
        36
    of2  
       2022-11-02 19:32:24 +08:00   ❤️ 1
    https://quilljs.com/
    这个也不错啦
    dsggnbsp
        37
    dsggnbsp  
       2022-11-02 19:42:12 +08:00   ❤️ 1
    edge google 复现 firefox yes
    hahahahaha234
        38
    hahahahaha234  
       2022-11-02 21:28:37 +08:00   ❤️ 1
    win11 中文输入法 chrome 106.0.5249.62 版本 yes
    lwc645089781
        39
    lwc645089781  
       2022-11-03 09:38:01 +08:00   ❤️ 1
    现在版本已经是优化过了,以前连输入文字都会重复。
    这种情况一般是 顶格输入,就是前面没有字符的时候会出现。有一个临时解决方案就是在输入开头的地方加一个英文的空格, 在 html 里放一个 &nbsp;(或者 &emsp;) 用户在这个空格之后输入,就没有问题。
    vone
        40
    vone  
    OP
       2022-11-03 10:01:50 +08:00
    @lwc645089781 我测试是不止是顶格输入时候会出现,如果另起个新段落(<p></p>)重新输入会再次出现这个 bug 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   957 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 21:37 · PVG 05:37 · LAX 14:37 · JFK 17:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.