TinyMCE4 file_picker_callback - return additional params

Question

I am using my own custom file picker with TinyMCE 4's new file_picker_callback function. The documentation on this isn't great, so credit goes to Fred for getting me this far - https://mcmap.net/q/750747/-how-should-i-update-a-tinymce-plugin-using-tiny_mce_popup-js-for-version-4

The custom file picker is working and when you click on an image it fills in the "Source" and also the "Dimensions". I'm just wondering if there is any way to automatically fill in the "Image description" field as well.

The information for the images is generated from a database table, so I already have a description and it would be nice to automatically fill it in for the user. After trying various ways of passing the data back I'm struggling to understand how it can be done.

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

My javascript knowledge isn't the greatest yet as I'm quite new to it, so if you could please illustrate any answers with examples and/or clear logic that would be very useful and much appreciated.

Brittabrittain

Answer 1

I was having the same problem, and came up with the following solution:

1. Update your myImagePicker function to be (note the new objVals parameter to the oninsert function):

   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. Update your mySubmit function to be (note the objVals parameter that is passed to oninsert):

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

3. Update the places that you call mySubmit to fill-in the objVals object.

   For example:

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

   The properties to fill-in for objVals change based on the type of calling dialog, and are (partially) documented here.

   For the link dialog:

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

   For the image dialog:

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

   For the mediadialog:

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

Gaelan

I'd almost given up hope on this, but 6 weeks after I posted, a hero named Jason comes along and gets it right first time. This worked perfectly for me. Thank you so so much for taking the time to reply! – Brittabrittain

@Lason S: in this case you should accept the answer – Quesada