如何在CKEditor的MyUploadAdapter._initRequest()中传递编辑器容器ID？

步骤1：修改上传适配器，支持传递编辑器ID #

更新MyUploadAdapter类，添加构造函数接收编辑器ID，并在上传请求中携带该ID：

class MyUploadAdapter {
    // 新增editorId参数，保存当前编辑器的ID
    constructor(loader, editorId) {
        this.loader = loader;
        this.editorId = editorId;
    }
    
    upload() {
        return this.loader.file
            .then(file => new Promise((resolve, reject) => {
                this._initRequest();
                this._initListeners(resolve, reject, file);
                this._sendRequest(file);
            }));
    }

    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();
        // 替换为你的控制器上传接口地址
        xhr.open('POST', '/YourController/UploadImage', true);
        xhr.responseType = 'json';
    }

    _initListeners(resolve, reject, file) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = `无法上传文件: ${file.name}.`;

        xhr.addEventListener('error', () => reject(genericErrorText));
        xhr.addEventListener('abort', () => reject());
        xhr.addEventListener('load', () => {
            const response = xhr.response;
            if (!response || response.error) {
                return reject(response && response.error ? response.error.message : genericErrorText);
            }
            // 返回CKEditor需要的图片URL格式
            resolve({ default: response.url });
        });

        if (xhr.upload) {
            xhr.upload.addEventListener('progress', evt => {
                if (evt.lengthComputable) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            });
        }
    }

    _sendRequest(file) {
        const data = new FormData();
        data.append('photo', file);
        // 将编辑器ID加入表单数据，传给控制器
        data.append('editorId', this.editorId);
        this.xhr.send(data);
    }
}

步骤2：编写适配器工厂，关联编辑器ID #

创建工厂函数，在初始化CKEditor时自动将当前编辑器的DOM ID传递给适配器：

function MyUploadAdapterFactory(editor) {
    return function(loader) {
        // 获取当前编辑器对应的div元素ID
        return new MyUploadAdapter(loader, editor.element.id);
    };
}

步骤3：初始化两个CKEditor实例 #

为每个div初始化CKEditor，并注入自定义上传适配器：

<div id="editor_1">
     @Html.Raw(@Model.Description_1)
</div>

<div id="editor_2">
     @Html.Raw(@Model.Description_2)
</div>

<script>
// 初始化第一个编辑器
ClassicEditor
    .create(document.querySelector('#editor_1'), {
        extraPlugins: [MyUploadAdapterFactory],
        // 其他CKEditor配置项
    })
    .catch(error => console.error(error));

// 初始化第二个编辑器
ClassicEditor
    .create(document.querySelector('#editor_2'), {
        extraPlugins: [MyUploadAdapterFactory],
        // 其他CKEditor配置项
    })
    .catch(error => console.error(error));
</script>

步骤4：控制器接收并识别编辑器ID #

在控制器的上传方法中，通过Request.Form获取编辑器ID，区分上传来源：

[HttpPost]
public IActionResult UploadImage()
{
    // 获取当前上传图片所属的编辑器ID
    string editorId = Request.Form["editorId"];

    foreach (IFormFile photo in Request.Form.Files)
    {
        if (photo.Length > 0)
        {
            // 根据editorId判断是editor_1还是editor_2，执行对应逻辑
            // 例如：保存到不同目录、关联到模型的不同字段等
            if (editorId == "editor_1")
            {
                // 处理editor_1的图片上传
            }
            else if (editorId == "editor_2")
            {
                // 处理editor_2的图片上传
            }
        }
    }

    // 返回上传成功后的图片URL，示例返回
    return Json(new { url = "/uploads/your-image-path.jpg" });
}

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