TinyMCE4 file_picker_callback - return zusätzliche Parameter

Question

Ich benutze meine eigene benutzerdefinierte Dateiauswahl mit TinyMCE 4 neue file_picker_callback Funktion. Die Dokumentation dazu ist nicht großartig, so Kredit geht an Fred für mich so weit - https://stackoverflow.com/a/24571800/2460995

Die benutzerdefinierte Dateiauswahl funktioniert und wenn Sie auf ein Bild klicken, füllt es die "Quelle" und auch die "Abmessungen ". Ich frage mich nur, ob es eine Möglichkeit gibt, das Feld "Image description" auch automatisch auszufüllen.

Die Informationen für die Bilder werden aus einer Datenbanktabelle generiert, daher habe ich bereits eine Beschreibung und es wäre nett, sie automatisch für den Benutzer auszufüllen. Nachdem ich verschiedene Wege versucht habe, die Daten zurück zu geben, habe ich Schwierigkeiten zu verstehen, wie es gemacht werden kann.

-Code für TinyMCE:

tinymce.init({ 
    ... 
    file_picker_callback: function(callback, value, meta) { 
     myImagePicker(callback, value, meta); 
    } 
}); 

function myImagePicker(callback, value, meta) { 
    tinymce.activeEditor.windowManager.open({ 
     title: 'Image Browser', 
     url: '/media/browser/1?type=' + meta.filetype, 
     width: 800, 
     height: 550, 
    }, { 
     oninsert: function (url) { 
      callback(url); 
     } 
    }); 
}; 

-Code für das Custom File Picker:

$(function(){ 
    $('.img').on('click', function(event){ 
     mySubmit('/upload/' + $(this).data('filename')); 
    }); 
}); 

function mySubmit(url) { 
    top.tinymce.activeEditor.windowManager.getParams().oninsert(url); 
    top.tinymce.activeEditor.windowManager.close(); 
} 

Mein Javascript Wissen ist nicht der größte noch, wie ich es ganz neu bin, also wenn Sie Bitte erläutern Sie Ihre Antworten mit Beispielen und/oder klarer Logik, die sehr nützlich und sehr geschätzt wären.

Answer 1

ich das gleiche Problem hatte, und kam mit der folgenden Lösung:

1. Aktualisieren Sie Ihre myImagePicker Funktion (man beachte die neuen objVals Parameter an die oninsert-Funktion) zu sein:

   function myImagePicker(callback, value, meta) { 
       tinymce.activeEditor.windowManager.open({ 
        title: 'Image Browser', 
        url: '/media/browser/1?type=' + meta.filetype, 
        width: 800, 
        height: 550, 
       }, { 
        oninsert: function (url, objVals) { 
         callback(url, objVals); 
        } 
       }); 
   }; 
   

2. Aktualisieren Sie Ihre mySubmit Funktion (beachten Sie den objVals Parameter, der an oninsert übergeben wird):

   function mySubmit (url, objVals) { 
       top.tinymce.activeEditor.windowManager.getParams().oninsert(url, objVals); 
       top.tinymce.activeEditor.windowManager.close(); 
       return false; 
   } 
   

3. Aktualisieren Sie die Orte, die Sie mySubmit rufen füllen Sie das objVals Objekt.

   Zum Beispiel:

   mySubmit("https://google.com", { text: "Go To Google", target: '_blank' }); 
   

   Die Eigenschaften für objVals Änderung fill-in basierend auf dem Typ von Dialog Aufruf und (teilweise) dokumentiert here.

   für den Link-Dialog:

   mySubmit("https://google.com", { text: "Go To Google", target: '_blank' }); 
   

   Für das Bild Dialog:

   mySubmit("image.jpg", { alt: "My image" }); 
   

   Für die mediadialog:

   mySubmit("movie.mp4", {source2: 'movie-alt.ogg', poster: 'movie-image.jpg'});