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

Question

我正在尝试整合 CKEditor在 Angular 应用程序中。在 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'-Event 必须在 ckeditor-instance 上注册，而不是在 CKEDITOR 本身上注册。

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