CKEDITOR 图像上传 - fileUploadResponse 事件未触发

Question

我正在尝试集成CKEditor到 Angular App 中。在CKEditor，我正在尝试使用uploadimage。在我的应用程序的运行方法中，我编写了以下代码来监听CKEditor.

 CKEDITOR.on( 'instanceCreated', function( event ) {
            console.log("CKEditor instance created");
 });

  CKEDITOR.on( 'fileUploadResponse', function( evt ) {
                // Prevent the default response handler.
                console.log("Image Uploaded");
                evt.stop();

                // Ger XHR and response.
                var data = evt.data,
                    xhr = data.fileLoader.xhr,
                    response = xhr.responseText.split( '|' );

            if ( response[ 1 ] ) {
                // Error occurred during upload.
                data.message = response[ 1 ];
                evt.cancel();
            } else {
                data.url = response[ 0 ];
            }
            console.log("Image Uploaded");
 } );

在控制台它正在打印CKEditor instance created，但不打印Image Uploaded。不知何故，它没有在听fileUploadResponse事件。

我的 CKEditor 配置文件如下：

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'forms' },
        { name: 'tools' },
        { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'others' },
        '/',
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'about' }
    ];

    // Remove some buttons provided by the standard plugins, which are
    // not needed in the Standard(s) toolbar.
    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';
    config.extraPlugins = 'uploadimage';
    config.uploadUrl = '/notice/fileupload';
};

一切正常，我的图像文件也成功上传，我收到以下 JSON 响应：

{
    "uploaded": 1,
    "fileName": "checkout.PNG",
    "url": "/img/syllabus/checkout.PNG",
    "error": null
}

但fileUploadResponse经过这么多次尝试后并没有开火。我不确定我缺少哪一部分。

Answer 1

我认为“fileUploadResponse”事件必须在 ckeditor 实例上注册，而不是在 CKEDITOR 本身上注册。

var editor = $( 'textarea#editor1' ).ckeditor();
editor.on( 'fileUploadResponse', function( evt ) {...});

Answer 2

谢谢，@Benjamin Schüller 指出了正确的方向。

我将ng-ckeditor库用于 CKEditor Textarea 以及 ng-model 数据。该库具有启动 CKEditor 实例的指令。我所需要的只是获取该实例并向其注册fileUploadResponse事件。

以下是我在模板 html 中的 textarea：

<textarea id="noticeDetails" ckeditor="editorOptions" name="description" ng-model="ctrl.notice.description" ></textarea>

在我的 Angular Controller 中，我正在定义editorOptions和绑定fileUploadResponse：

        $scope.editorOptions = {
            language: 'en',
            allowedContent: true,
            entities: false
        };

        $scope.$on("ckeditor.ready", function( event ) {                
            var noticeCkEditor = CKEDITOR.instances["noticeDetails"];
            noticeCkEditor.on( 'fileUploadResponse', function( evt ) {                      
                // Prevent the default response handler.
                evt.stop();

                // Get XHR and response.
                var data = evt.data,
                    xhr = data.fileLoader.xhr,
                    response = xhr.responseText;

                var respJson = angular.fromJson(response);
                console.log(respJson);

                if ( respJson.error ) {
                    // Error occurred during upload.
                    data.message = respJson.error.message;
                    evt.cancel();
                } else {                
                    data.url = respJson.url;
                }
            } );

        });

以下是我对文件上传的 JSON 响应：

{
    "uploaded": 1,
    "fileName": "IMG_1202.PNG",
    "url": "/img/society/notice/IMG_1202.PNG",
    "error": null
}

这里有几点需要注意：

1. 您可以在 CKEditor 完全初始化后获得一个实例。ng-ckeditor已广播名为ckeditor.ready. 因此，ckeditor.ready您可以获得一个实例并绑定特定于编辑器的事件。

2. CKEditor 使用文本区域的 id 为实例命名。在我的例子中 id 是noticeDetails，所以它会创建一个 name 的实例noticeDetails。如果您没有给出 id，那么它将创建带有名称的实例editor1，editor2依此类推。就我而言，我正在获取noticeDetails名称为 CKEditor 的实例。

3. CKEditor 文档中提到了手动处理文件上传响应的示例代码。但它不起作用。根据我的实验，它们将整个 JSON 字符串绑定到data.messageordata.url这不是方法。我们需要做的是从响应字符串创建 JSON 对象，并从该 JSON 对象中适当地获取消息或 URL，并将其与数据对象绑定，如上面的代码所示。