CKEditor内输入文字或按退格导致复选框自动取消选中怎么解决

问题原因 #

这个问题是CKEditor 4的事件冒泡机制和默认表单联动逻辑共同导致的：

• CKEditor编辑区的按键（包括退格、输入等）事件默认会向上冒泡到页面全局，如果上层表单有监听按键事件的逻辑，就可能意外触发复选框状态重置
• 如果页面存在未正确设置for属性的label标签，把复选框和CKEditor编辑区包裹在同一个label下，操作编辑区会触发label的默认行为，切换复选框的选中状态
• CKEditor默认开启的autoUpdateElement配置，会在内容变更时自动同步原textarea的值，这个过程如果和你页面上的其他表单状态监听逻辑冲突，也会导致复选框状态被修改

解决方案 #

方案1：阻止CKEditor事件冒泡 #

修改初始化配置，拦截CKEditor的按键和内容变更事件，禁止向上冒泡到页面上层：

CKEDITOR.replace('editor1', {
    on: {
        key: function(evt) {
            evt.stopPropagation();
        },
        change: function(evt) {
            evt.stopPropagation();
        }
    }
});

方案2：修正label标签的关联逻辑 #

如果你的页面中使用了label标签关联复选框，确保不要把CKEditor的编辑区放在复选框对应的label内部，同时显式指定label的for属性和复选框的id对应：

<label for="description">描述开关</label>
<input type="checkbox" id="description" value="1" checked>
<textarea name="editor1">Lorem ipsum dolor amet</textarea>

方案3：关闭自动表单同步逻辑 #

如果不需要CKEditor自动同步textarea内容，可以关闭autoUpdateElement配置，在表单提交时手动同步内容即可：

// 初始化时关闭自动同步
CKEDITOR.replace('editor1', {
    autoUpdateElement: false
});

// 表单提交前手动同步编辑器内容到原textarea
document.querySelector('form').addEventListener('submit', function() {
    CKEDITOR.instances.editor1.updateElement();
});

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