CKeditor代码触发两次问题：原因排查及修复方案

兄弟，我之前也踩过类似的坑，咱们来梳理下大概率导致这个问题的几个原因：

1. 重复绑定了change事件 #

这是最常见的诱因！如果你在config.js里既配置了onchange插件的回调，又手动通过editor.on('change', function() { ... })绑定了一次相同的输出逻辑，那每次内容变化时两个回调都会执行，自然就会输出两次zzz。比如你可能不小心写了这样的代码：

// config.js里的插件配置
config.extraPlugins = 'onchange';
config.onChange = function() {
    console.log('zzz');
};

// 同时在编辑器初始化代码里又加了一遍绑定
CKEDITOR.replace('editor');
CKEDITOR.instances.editor.on('change', function() {
    console.log('zzz');
});

这种情况下两个回调会同时触发，直接导致重复输出。

2. 插件逻辑与编辑器原生事件叠加 #

onchange插件本身是通过监听编辑器的多个底层事件（比如key、selectionChange、contentDomInvalidated等）来模拟统一的change事件。如果你的代码同时监听了这些底层事件中的某一个，并且逻辑和onchange的回调重复，也会触发两次输出。

3. 编辑器自动修正触发额外变更 #

有时候CKEditor会对输入内容做自动修正（比如自动补全标签、格式化段落），一次输入会触发两次内容变更：第一次是你输入的原始内容，第二次是编辑器修正后的内容，onchange插件会把这两次都识别为change事件，从而触发两次回调。

排查和解决建议 #

• 先检查所有代码，删掉重复的change事件绑定，只保留一处逻辑；
• 如果是自动修正导致的，可以尝试关闭部分自动格式化配置：

config.autoParagraph = false;
config.enterMode = CKEDITOR.ENTER_BR;

• 也可以给回调加个防抖处理，避免短时间内多次触发：

let timeoutId;
config.onChange = function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
        console.log('zzz');
    }, 100);
};

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