shortcode - accessing wp.media api from a tinymce plugin

admin管理员组

文章数量:1389779

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: '/../../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

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

• plugins
• shortcode
• javascript
• tinymce

Share Improve this question edited Mar 1, 2016 at 3:09 Matt asked Feb 29, 2016 at 20:24 MattMatt 1111 bronze badge 1

• 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 Commented Mar 1, 2016 at 3:07

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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 );
                  })();

本文标签： shortcodeaccessing wpmedia api from a tinymce plugin