CKEditor4.1版本如何检测图片上传完成并触发后续ajax操作

该需求完全可以实现，无需升级CKEditor版本，以下是两种适配4.1版本的稳定方案：

方案1：监听编辑器插入元素事件（无需修改服务端逻辑） #

CKEditor 4.1 所有内容插入动作都会触发insertElement事件，图片上传完成后编辑器会自动将生成的<img>标签插入内容流，该节点可直接作为上传完成的触发时机。
实现代码示例：

// 编辑器初始化时绑定事件
var editor = CKEDITOR.replace('你的文本域ID', options);
editor.on('insertElement', function (event) {
    // 校验插入元素是否为图片标签
    if (event.data.getName() === 'img') {
        var imgSrc = event.data.getAttribute('src');
        // 可选校验：仅匹配本地上传的图片，排除手动插入的外部图片
        if (imgSrc.includes('/file/upload/')) { // 替换为你的图片路径前缀
            // 防抖处理，避免连续上传多张图片重复触发请求
            clearTimeout(window.uploadTriggerTimer);
            window.uploadTriggerTimer = setTimeout(function () {
                // 获取编辑器完整内容
                var editorContent = editor.getData();
                // 此处编写你的ajax逻辑，将editorContent发送到服务端
            }, 300);
        }
    }
});

该方案优势：无侵入性，不需要调整现有上传接口逻辑，适配所有4.1子版本。

方案2：自定义上传完成回调（触发时机100%准确） #

你当前配置的filebrowserUploadMethod: 'form'采用表单提交方式上传，上传完成后服务端默认返回调用CKEditor全局回调的脚本，可在该返回逻辑中新增自定义通知。

步骤1：修改服务端上传接口返回内容 #

以PHP为例，上传成功后返回内容调整为：

<?php
$callbackNum = $_GET['CKEditorFuncNum'];
$uploadedImgUrl = '你上传后的图片访问地址';
// 先触发自定义的全局完成事件，再执行默认的图片插入逻辑
echo '<script>
window.parent.customImageUploadFinish();
window.parent.CKEDITOR.tools.callFunction('.$callbackNum.', "'.$uploadedImgUrl.'", "");
</script>';

步骤2：前端定义自定义回调函数 #

// 全局定义上传完成处理函数
window.customImageUploadFinish = function () {
    var editor = CKEDITOR.instances['你的编辑器ID'];
    var editorContent = editor.getData();
    // 此处编写你的ajax逻辑
};

该方案优势：完全不会误判其他场景下插入的图片，触发时机完全和上传成功动作绑定。

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