从tinymce插件访问wp.media API

时间:2016-02-29 作者:Matt

我正在尝试创建一个tinymce插件,该插件生成一个包含两个图像ID的短代码:

[image-fade old="xx" new="yy"]
我想让用户直接从媒体选择器框中选择图像,但还不知道如何做到这一点。我可以允许用户在警报框中输入ID,但做得再好不过了。这就是我目前的情况:

( 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 );
})();
媒体选择器窗口将打开,我可以选择两个图像,但javascript控制台不会记录任何内容,生成的短代码为:

[image-fade old="undefined" new="undefined"]
我做错了什么?谢谢你的帮助!马特

1 个回复
SO网友:Matt

我有一个使用承诺的有效解决方案,但它很难看,我当然会感谢提示。我还没有弄清楚如何实例化promises的子类,因此代码重复且效率低下,并且还实例化了wp。媒体框两次。此外,承诺中没有“拒绝”指令,因此如果承诺不能解决问题,它将永远挂在空白处。

我不会接受这个答案,因为我觉得这是如此糟糕的代码,我相信有人可以想出更好的方法!

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

相关推荐

仅在一个页面中使用的JavaScript的本地化

Environment:<WordPress 5.8版WPML:4.4.10版What I am trying to achieve?我有一个JavaScript验证脚本,可以验证注册页面上的输入。此脚本显示错误消息。我想要两件事:字符串应使用WPML进行管理/翻译脚本应仅嵌入注册页面What did I already achieve?我向函数中添加了以下脚本。我的主题的php。add_action(\'wp_enqueue_scripts\', function() { // R