1

I'm trying to create a tinymce plugin that generates a shortcode containing two image ids:

[image-fade old="xx" new="yy"]

I would like to let users select images directly from the media selector frame, but haven't figured out how to do this. I am able to allow the users to enter the ID in an alert box, but can't do better than that. This is what I have so far:

( function() {
    var open_media_window = function () {
        var first={};

        var window = wp.media({
            title: 'Insert a media',
            library: {type: 'image'},
            multiple: false,
            button: {text: 'Insert'}
        });
        window.on('select', function(){
            var files = window.state().get('selection').toArray();
            first = files[0].toJSON();
            console.log ("first is: " + first);
            return first.id;
        });
        window.open();
        return first.id;

    };
    tinymce.create( 'tinymce.plugins.hhImage', {
    init: function( ed, url ) {
        ed.addButton( 'hh_image', {
        title: 'Insert Historical Image Overlay',
        image: 'http://matttest.hackinghistory.ca/wp-content/plugins/custom-content-type-manager/js/plugins/../../images/wrench.png',
        onclick: function() {       
            //old = prompt( "Enter id of old photo", "" );
            old = open_media_window();
            //newImage = prompt( "Enter id of new photo", "" );
            newImage = open_media_window();
            ed.execCommand( 'mceInsertContent', false, '[image-fade old="' + old + '" new="' + newImage + '"]' );
        }
        });
    },
    createControl: function( n, cm ) { return null; },
    });
    tinymce.PluginManager.add( 'hh_image', tinymce.plugins.hhImage );
})();

The media selector window will open, and I can select two images, but nothing gets logged to the javascript console and the shortcode produced is:

[image-fade old="undefined" new="undefined"]

What am I doing wrong here? Thanks for the help! Matt

  • After sniffing around, I think I need to add a promise to the open_media_window method. But I don't really understand promises at all, so if anyone has any suggestions.... – Matt Mar 1 '16 at 3:07
0

I have a working solution that uses Promises, but it is ugly and I would certainly appreciate tips. I haven't been able to figure out how tot instantiate a subclass of promises, so the code is repetitive and inefficient, and also instantiates the wp.media frame twice. In addition, there's no "reject" directive in the Promise so if the Promise doesn't resolve it will just hang in empty space forever.

I'm not going to accept this answer as I feel it's such bad code that I'm sure someone can come up with something better!

    /**
 * TinyMCE buttons for custom shortcodes
 */
( function() {
    var open_media_window = function () {
        var first={};

        var window = wp.media({
            title: 'Insert a media',
            library: {type: 'image'},
            multiple: false,
            button: {text: 'Insert'}
        });
        window.on('select', function(){
            var files = window.state().get('selection').toArray();
            first = files[0].toJSON();
            console.log ("first is: " + first);
            return first.id;
        });
        window.open();
        return first.id;

    };
    tinymce.create( 'tinymce.plugins.hhImage', {
        init: function( ed, url ) {
            ed.addButton( 'hh_image', {
            title: 'Insert Historical Image Overlay',
            image: url + '/hist-image.png',
            onclick: function() {

                //old = prompt( "Enter id of old photo", "" );
                    var promise = new Promise(function(resolve,reject) {
                        var window =  wp.media({
                            title: 'Choose HISTORICAL image',
                            library: {type: 'image'},
                            multiple: false,
                            button: {text: 'Use as HISTORICAL image'}
                        });
                        window.on('select', function(){
                            var files = window.state().get('selection').toArray();
                            first = files[0].toJSON();
                            console.log ("first is: " + first);
                            resolve(first.id);
                        });
                        window.open();  
                    });
                    promise.then(function(data) {
                        var old = data;
                        var promise2  = new Promise(function (resolve,reject) {
                            var window =  wp.media({
                                title: 'Choose CONTEMPORARY image',
                                library: {type: 'image'},
                                multiple: false,
                                button: {text: 'Use as CONTEMPORARY image'}
                            });
                            window.on('select', function(){
                                var files = window.state().get('selection').toArray();
                                first = files[0].toJSON();
                                console.log ("first is: " + first);
                                resolve(first.id);
                            });
                            window.open();  
                        });
                        promise2.then(function(data2) {
                            var newImage = data2;
                            ed.execCommand( 'mceInsertContent', false, '[image-fade old="' + old + '" new="' + newImage + '"]' );
                        });
                    });



                      //  open_media_window();
                      //  old = promise.done();
                    //newImage = prompt( "Enter id of new photo", "" );
                        //newImage = open_media_window();
                    //ed.execCommand( 'mceInsertContent', false, '[image-fade old="' + old + '" new="' + newImage + '"]' );
                }
                });
                        },
            createControl: function( n, cm ) { return null; },
        });
                    tinymce.PluginManager.add( 'hh_image', tinymce.plugins.hhImage );
                  })();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.