CKEditor5：阻止回车键删除行内小部件的问题求助

要阻止选中自定义行内小部件时按回车被替换为换行的行为，并触发编辑逻辑，你需要调整事件监听的方式和优先级，以下是两种可靠的解决方案：

方案一：全局高优先级监听回车事件 #

原来的代码问题在于依赖data.target判断元素不准确，且事件优先级低于编辑器默认处理逻辑，导致阻止操作无效。正确的做法是通过模型选区获取选中元素，并设置高优先级监听：

// 在插件的init方法中实现
const editor = this.editor;
const viewDocument = editor.editing.view.document;

editor.listenTo(viewDocument, 'keydown', (evt, data) => {
    if (data.keyCode !== 13) return;

    // 获取当前模型选区选中的元素
    const selectedElement = editor.model.document.selection.getSelectedElement();
    
    // 判断选中的是自定义小部件
    if (selectedElement && selectedElement.name === 'myWidget') {
        // 阻止浏览器默认行为 + 停止CKEditor事件传播
        data.preventDefault();
        evt.stop();

        // 执行你的编辑逻辑
        // call external function
    }
}, { priority: 'high' }); // 设置高优先级，确保先于编辑器默认逻辑执行

方案二：利用Widget插件的内置键盘事件配置 #

如果你的小部件是基于CKEditor5的Widget插件开发的，直接在小部件定义中配置keystrokes会更符合官方规范，也更可靠：

// 在小部件注册代码中添加
editor.widgets.add('myWidget', {
    // ... 已有的小部件配置（如upcast、downcast等）
    keystrokes: [
        {
            keyCode: 13,
            callback: (widget) => {
                // 执行你的编辑逻辑
                // call external function
                return true; // 返回true表示阻止默认回车行为
            }
        }
    ]
});

关键说明 #

1. 选区判断：不要依赖data.target，CKEditor5中通过model.document.selection.getSelectedElement()才能准确获取当前选中的小部件元素。
2. 事件优先级：设置priority: 'high'可以让你的逻辑先于编辑器的默认回车处理执行，确保阻止操作生效。
3. 阻止行为的正确方式：同时调用data.preventDefault()（阻止浏览器默认行为）和evt.stop()（停止CKEditor内部事件传播），才能彻底阻止小部件被替换。

内容的提问来源于stack exchange，提问作者tribalDev