CKEditor 4.5 trascinamento della selezione dell'immagine - come restituire nuove dimensioni nella risposta JSON?

Question

Ho trascinato i caricamenti di immagini che funzionano con CKEditor 4.5.1. Funzionalità molto bella! Sul lato server sto ridimensionando le immagini di grandi dimensioni. La mia risposta JSON restituisce l'url di immagine ridimensionato (impostato da 'url' nella risposta) e cioè l'immagine che viene mostrata nella finestra di CKEditor dopo il caricamento del file. Ma il tag img inserito ha gli attributi di altezza e larghezza impostati con i valori dell'immagine originale, non la mia immagine ridimensionata. C'è un modo per restituire i nuovi valori di altezza e larghezza? O qualcuno ha un'idea di come incidere su questo?

E più in generale, esiste una risorsa che descrive tutti i possibili valori nella risposta JSON? Ho visto che diceva da qualche parte che non era ancora documentato, ma spero che qualcuno possa saperlo e prendersi il tempo per condividerlo.

Answer 1

Quando si carica un'immagine, CKEditor sostituisce un widget di caricamento (che contiene un'immagine con dati Base64 nell'origine) con l'HTML finale. L'immagine caricata ha le stesse dimensioni di quella caricata per evitare di lampeggiare durante questa sostituzione. Here are the lines che effettua questa sostituzione.

Se lampeggia quando viene caricato l'immagine non è un problema per voi, allora si può semplice sovrascrivere questo metodo:

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

Ora, dove possiamo ottenere le dimensioni delle immagini da?

Un'opzione è caricare l'immagine (upload.url) e leggere le sue dimensioni nel browser. Tuttavia, si tratta di un'operazione asincrona, quindi potrebbe influire sul gestore di annullamento e non lo consiglierei.

Pertanto, se si conoscono le nuove dimensioni che è possibile inviare, quindi nella risposta del server. Se li metti nella tua risposta JSON in questo modo:

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

È necessario gestirli nella risposta (vedremo molto probabilmente semplificare questo bit presto):

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

Per saperne di più controllare la editor#fileUploadResponse evento e la guida Uploading Dropped or Pasted Files.

Poi li si può usare nel widget di upload:

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

PS. Stavamo considerando di includere una funzionalità di questo tipo nel core, ma poiché l'uscita era enorme, abbiamo dovuto limitarla ad un certo punto per portarla finalmente in vita. C'è una grande possibilità che tale funzionalità sarà presto inclusa nel core e sarà necessaria solo la configurazione.

Answer 2

@ Michael, grazie per la risposta. Ho ancora testato e posso dire che fileUploadResponse non è richiesto.

dati responce è raggiungibile da instanceReady come questo (se presente in responce da ofcource del server)

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