CKEditor中通过左右移动光标可删除不可编辑文本的问题咨询

这个问题我之前也踩过坑——CKEditor默认的编辑逻辑有时候会绕过视觉区分，让不可编辑内容被误删。给你几个亲测有效的解决思路：

1. 给不可编辑元素明确标记contenteditable="false" #

只靠样式区分可编辑/不可编辑是不够的，必须给不可编辑的span加上官方认可的contenteditable="false"属性，让CKEditor明确知道这部分内容不能碰：

<span contenteditable="false">这是不可编辑文本</span>
<span contenteditable="true" style="background:yellow;">这是可编辑文本</span>

同时要确保编辑器不会过滤掉这个属性，在CKEditor配置中添加：

// 允许所有内容（或者更精细地控制）
CKEDITOR.config.allowedContent = true;
// 精细配置：只允许span的contenteditable和style属性
// CKEDITOR.config.allowedContent = 'span[contenteditable,style]';

这个方法是最规范的，CKEditor原生就支持对contenteditable属性的识别，大部分情况下能解决问题。

2. 监听按键事件，阻止误删除操作 #

如果第一种方法还存在漏网之鱼（比如光标刚好卡在可编辑和不可编辑内容的边界时），可以通过监听编辑器的按键事件，手动阻止退格/删除键对不可编辑内容的操作：

CKEDITOR.on('instanceReady', function(e) {
    const editor = e.editor;
    editor.on('key', function(evt) {
        const keyCode = evt.data.keyCode;
        // 处理退格键（8）和删除键（46）
        if (keyCode !== 8 && keyCode !== 46) return;

        const selection = editor.getSelection();
        const range = selection.getRanges()[0];
        const startNode = range.startContainer;

        // 检查光标前一个节点是否是不可编辑的span
        const prevNode = startNode.previousSibling;
        if (prevNode && prevNode.tagName === 'SPAN' && prevNode.getAttribute('contenteditable') === 'false') {
            evt.cancel(); // 阻止默认删除行为
            return;
        }

        // 检查光标后一个节点是否是不可编辑的span（处理删除键）
        const nextNode = startNode.nextSibling;
        if (nextNode && nextNode.tagName === 'SPAN' && nextNode.getAttribute('contenteditable') === 'false') {
            evt.cancel();
        }
    });
});

这段代码会在编辑器初始化完成后，监听每一次按键，当用户试图删除紧邻的不可编辑span时，直接取消操作。

3. 用protectedSource把不可编辑内容标记为受保护 #

如果希望编辑器完全忽略不可编辑内容的存在（连选中都不允许），可以用CKEditor的protectedSource配置，把不可编辑span的正则加入受保护列表：

CKEDITOR.config.protectedSource.push(/<span contenteditable="false">[\s\S]*?<\/span>/g);

这样编辑器会把匹配到的内容视为“只读”的保护内容，任何编辑操作（包括删除、修改）都无法影响它们。不过这个方法灵活性稍差，适合完全不需要用户触碰的内容。

建议先从第一种方法开始尝试，这是最符合CKEditor设计逻辑的方案；如果还有边界情况的问题，再结合第二种方法补充防护。

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