CKEDITOR画像アップロード - fileUploadResponseイベントが起動しない

Question

角度アプリでCKEditorを統合しようとしています。 CKEditorでは、uploadimageを使用しようとしています。私のアプリのrunメソッドでは、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-instanceに登録する必要があります。

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

Answer 2

@BenjaminSchüllerが正しい方向を指しています。

私はng-ckeditorライブラリを使用して、CKEditor textaria alogとng-modelデータを使用しています。このライブラリには、CKEditorインスタンスを開始するディレクティブがあります。私が必要としたのは、そのインスタンスを取得してfileUploadResponseイベントを登録することだけでした。続き

は、テンプレートのHTMLの私のテキストエリアです：

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

そして、私の角度コントローラーで、私は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(); 

       // Ger 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は、textareaのidを使用してインスタンスに名前を付けます。私の場合、IDはnoticeDetailsなので、名前がnoticeDetailsのインスタンスが作成されます。 IDを指定していない場合は、名前がeditor1、editor2などのインスタンスが作成されます。私の場合は、noticeDetailsという名前のCKEditorインスタンスを取得しています。

3. CKEditor documentationには、ファイルアップロードの応答を手動で処理するコード例が記載されています。しかし、それは動作していません。彼らは私の実験ごとに行う方法ではないdata.messageまたはdata.urlにバインドしています。レスポンス文字列からJSONオブジェクトを作成し、そのJSONオブジェクトからメッセージまたはURLを適切に取得し、上記のコードに示すようにデータオブジェクトにバインドする必要があります。