CKEditor 4.5 przeciągnij i upuść upload obrazu - jak zwrócić nowe wymiary w odpowiedzi JSON?

Question

Mam przeciągnij i upuść przesyłanie obrazów działa przy użyciu CKEditor 4.5.1. Bardzo fajna funkcja! Po stronie serwera zmieniam rozmiar dużych obrazów. Moja odpowiedź JSON zwraca zmieniony URL obrazu (ustawiony przez "url" w odpowiedzi) i jest to obraz, który jest wyświetlany w oknie CKEditor po pomyślnym przesłaniu pliku. Ale wstawiony znacznik img ma atrybuty wysokości i szerokości ustawione za pomocą wartości z oryginalnego obrazu, a nie ze zmienionego obrazu. Czy istnieje sposób na zwrócenie nowych wartości wysokości i szerokości? A może ktoś ma pomysł, jak się tym zająć?

A bardziej ogólnie, czy istnieje jakiś zasób, który opisuje wszystkie możliwe wartości w odpowiedzi JSON? Widziałem, jak wspomniałem gdzieś, że nie zostało to jeszcze udokumentowane, ale mam nadzieję, że ktoś może to wiedzieć i poświęcić trochę czasu.

Answer 1

Po przesłaniu obrazu CKEditor zastępuje widżet przesyłania (który zawiera obraz z danymi Base64 w źródle) z ostatecznym kodem HTML. Przesłany obraz ma te same wymiary, co przesyłany, aby zapobiec migotaniu podczas wymiany. Here are the lines, które wykonują ten zamiennik.

Jeśli miga, gdy obraz jest przesyłany nie jest to problem dla ciebie, to można zastąpić tę metodę proste:

editor.on('instanceReady', function() { 
    editor.widgets.registered.uploadimage.onUploaded = function (upload) { 
     this.replaceWith('<img src="' + upload.url + '">'); 
    } 
}); 

Teraz, gdzie możemy uzyskać wymiary obrazu z?

Jedną opcją jest załadowanie obrazu (upload.url) i odczytanie jego wymiarów w przeglądarce. Jest to jednak operacja asynchroniczna, więc może wpłynąć na menedżera cofania i nie poleciłbym tego.

Dlatego, jeśli znasz nowe wymiary, możesz je wysłać w odpowiedzi serwera. Jeśli umieścisz je w swojej odpowiedzi JSON jak poniżej:

{ 
    "uploaded": 1, 
    "fileName": "foo.jpg", 
    "url": "/files/foo.jpg", 
    "width:" 300, 
    "height:" 200 
} 

Trzeba obchodzić się z nimi w odpowiedzi (będziemy najprawdopodobniej uprościć ten kawałek wkrótce):

editor.on('fileUploadResponse', function(evt) { 
    var fileLoader = evt.data.fileLoader, 
     xhr = fileLoader.xhr, 
     data = evt.data; 

    try { 
     var response = JSON.parse(xhr.responseText); 

     // Error message does not need to mean that upload finished unsuccessfully. 
     // It could mean that ex. file name was changes during upload due to naming collision. 
     if (response.error && response.error.message) { 
      data.message = response.error.message; 
     } 

     // But !uploaded means error. 
     if (!response.uploaded) { 
      evt.cancel(); 
     } else { 
      data.fileName = response.fileName; 
      data.url = response.url; 
      data.width = response.width; 
      data.height = response.height; 

      // Do not call the default listener. 
      evt.stop(); 
     } 
    } catch (err) { 
     // Response parsing error. 
     data.message = fileLoader.lang.filetools.responseError; 
     window.console && window.console.log(xhr.responseText); 

     evt.cancel(); 
    } 
}); 

Aby dowiedzieć się więcej sprawdź editor#fileUploadResponse wydarzenie i przewodnik Uploading Dropped or Pasted Files.

Następnie można z nich korzystać w widgecie Dodano:

editor.on('instanceReady', function() { 
    editor.widgets.registered.uploadimage.onUploaded = function(upload) { 
     this.replaceWith('<img src="' + upload.url + '" ' + 
      'width="' + upload.width + '" ' + 
      'height="' + upload.height + '">'); 
    } 
}); 

PS. Zastanawialiśmy się nad włączeniem takiej funkcji do jądra, ale ponieważ wydawnictwo było ogromne, musieliśmy go w pewnym momencie ograniczyć, by ożywić. Istnieje duża szansa, że ​​taka funkcja zostanie wkrótce dołączona do rdzenia i będzie potrzebna tylko konfiguracja.

Answer 2

@Michael, dzięki za odpowiedź. Testowałem i mogę powiedzieć, że fileUploadResponse nie jest wymagane.

dane responce można dotrzeć z instanceReady tak (jeśli jest obecny w responce z serwera ofcource)

__ckeditor.on('instanceReady', function() { 
    __ckeditor.widgets.registered.uploadimage.onUploaded = function(upload) { 
     console.log(upload); 
     this.replaceWith('<img src="' + upload.url + '" ' + 
      'width="' + upload.responseData.width + '" ' + 
      'height="' + upload.responseData.height + '">'); 
    } 
});