CKEDITOR Bild hochladen - fileUploadResponse Ereignis wird nicht ausgelöst

Question

Ich versuche CKEditor in Angular App zu integrieren. In CKEditor versuche ich uploadimage zu verwenden. In Run-Methode meiner App habe ich folgenden Code geschrieben, um die Ereignisse von CKEditor zu hören.

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"); 
}); 

In Konsole wird es Druck CKEditor instance created, aber nicht Image Uploaded Druck. Irgendwie hört es nicht fileUploadResponse Ereignis.

Meine Konfigurationsdatei von CKEditor ist wie folgt:

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'; 
}; 

Alles funktioniert gut und mein Image-Datei auch erfolgreich und ich erhalte folgende JSON-Antwort ist das Hochladen:

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

Aber fileUploadResponse ist nach so vielen Versuchen nicht feuern. Ich bin mir nicht sicher, welchen Teil ich vermisse.

Answer 1

Ich denke das 'fileUploadResponse'-Event muss auf der ckeditor-Instanz und nicht auf CKEDITOR selbst registriert werden.

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

Answer 2

Danke @Benjamin Schüller für in die richtige Richtung zeigen.

Ich verwende ng-ckeditor Bibliothek für CKEditor Textaria Alog mit ng-Modell Daten. Diese Bibliothek hat die Direktive, in der sie die CKEditor-Instanz initiieren. Ich brauche nur diese Instanz und registriere das Ereignis fileUploadResponse.

Es folgt mein Textfeld in Vorlage html:

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

Und in meinem Angular-Controller, ich definieren editorOptions und Bindung 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; 
       } 
      }); 

     }); 

Nach meiner JSON-Antwort auf Datei-Upload ist:

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

Wenige Dinge zu beachten:

1. Sie können die Instanz abrufen, nachdem der CKEditor vollständig initialisiert wurde. ng-ckeditor hat Sendung ckeditor.ready gesendet. So können Sie unter ckeditor.ready Instanz- und Bindungsereignisse abrufen, die für den Editor spezifisch sind.

2. CKEditor gibt der Instanz den Namen mit der ID von Textarea. In meinem Fall lautet die ID noticeDetails, daher wird die Instanz mit dem Namen noticeDetails erstellt. Falls Sie die ID nicht angegeben haben, erstellt sie eine Instanz mit den Namen editor1, editor2 und so weiter. In meinem Fall erhalte ich die CKEditor-Instanz mit dem Namen noticeDetails.

3. CKEditor documentation hat Beispielcode erwähnt, um Datei-Upload-Antwort manuell zu behandeln. Aber es funktioniert nicht. Sie binden ganze JSON-Zeichenketten an data.message oder data.url, was nicht der richtige Weg ist, wie es bei meinem Experiment der Fall ist.Was wir tun müssen, ist das JSON-Objekt aus der Antwortzeichenfolge zu erstellen und die entsprechende Nachricht oder URL von diesem JSON-Objekt zu erhalten und es mit dem Datenobjekt zu verbinden, wie im obigen Code gezeigt.