3.5媒体管理器-元数据中的标注

时间:2013-02-14 作者:Marcin Bobowski

做同一件事的两种方法:

第一个:

    var _custom_media = true,
    _orig_send_attachment = wp.media.editor.send.attachment;

    $(\'.media-upload-button\').click(function(e) {
        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = $(this);
        var id = button.attr(\'id\').replace(\'_button\', \'\');
        console.log(id);
        _custom_media = true;
        wp.media.editor.send.attachment = function(props, attachment){
            if ( _custom_media ) {
                $(\'#\'+id).val(attachment.url);
                $(\'#\'+id).prev().attr(\'src\', attachment.url);
                console.log(id);
            } else {
                return _orig_send_attachment.apply( this, [props, attachment] );
            };
        }
        wp.media.editor.open(button);
        return false;
    });

    $(\'.add_media\').on(\'click\', function(){
        _custom_media = false;
    });
第二个:

$(\'.media-upload-button\').click(function(e) {
    e.preventDefault();
    var button = $(this);
    var id = button.attr(\'id\').replace(\'_button\', \'\');
    console.log(id);
    //If the uploader object has already been created, reopen the dialog
    if (custom_uploader) {
        custom_uploader.open();
        return;
    }

    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: \'Wybierz zdjęcie\',
        button: {
            text: \'Wybierz zdjęcie\'
        },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field\'s value
    custom_uploader.on(\'select\', function() {
        attachment = custom_uploader.state().get(\'selection\').first().toJSON();
        $(\'#\'+id).val(attachment.url);
        $(\'#\'+id).prev().attr(\'src\', attachment.url);
        //console.log(attachment);
        console.log(id);
        //custom_uploader.close();
    });

    //Open the uploader dialog
    custom_uploader.open();

});
当它们“附加”到的字段/按钮只有一个时,这两个都可以很好地工作,但如果有多个字段/按钮,则只有第一个可以。第二个总是将数据插入第一个单击的按钮/字段,即使您单击了第二个(second console.log显示的或初始“id”与单击按钮后在控制台中显示的不同)。

但是第二个界面看起来更适合设计的作业,所以问题是-应该如何更改第二个代码,以便它可以处理多个输入字段/按钮?

好吧,第二个代码的问题是,创建一次的Media Manager对象保留在“内存”中,所以第二个callout只显示它,而不包含初始id的OVERRITE或GINAL“custom\\u uploader.on”。也许在关闭它之后应该销毁它?

要澄清的问题是:我应该如何使用wp。媒体框架。使用多个按钮/字段(而不是wp)正确设置file\\U帧。媒体编辑邮寄附件

附言对于那些想测试整个代码的人:

功能。php:

add_action( \'add_meta_boxes\', \'cs_products_mb_create\' );
function cs_products_mb_create() {
    //create a custom meta box
    add_meta_box( \'products-info\', \'Ustawienia Produktu\', \'cs_products_mb_function\', \'posts\', \'normal\', \'high\' );
}

function cs_products_mb_function( $post ) { ?>
    <div id="appcustomsettings">
        <p><input id="cs_product_menu_img_src" type="text" name="cs_product_menu_img_src" value="" /> <input id="cs_product_menu_img_src_button" type="button" value="Add / Change" class="button-secondary media-upload-button"  /></p>
        <p><input id="cs_product_bg_img_src" type="text" name="cs_product_bg_img_src" value="" /> <input id="cs_product_bg_img_src_button" type="button" value="Add / Change" class="button-secondary media-upload-button"  /></p>
    </div>
<?php   
}
add_action(\'admin_enqueue_scripts\', \'cs_admin_customposttype_scripts\');
function cs_admin_customposttype_scripts(){
    wp_enqueue_media(); 
    wp_enqueue_script( \'cs-image-upload\', get_bloginfo(\'template_url\').\'/js/admin.js\', array( \'jquery\') );
}
它已从加载和保存数据中剥离,但它做了它应该做的事情

管理员。工作但使用wp的js。媒体编辑邮寄附件代替wp。媒体框架。file\\u框架:

jQuery(document).ready(function($){
    var _custom_media = true,
    _orig_send_attachment = wp.media.editor.send.attachment;

    $(\'.media-upload-button\').click(function(e) {
        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = $(this);
        var id = button.attr(\'id\').replace(\'_button\', \'\');
        console.log(id);
        _custom_media = true;
        wp.media.editor.send.attachment = function(props, attachment){
            if ( _custom_media ) {
                $(\'#\'+id).val(attachment.url);
                    console.log(id);
            } else {
                return _orig_send_attachment.apply( this, [props, attachment] );
            };
        }
        wp.media.editor.open(button);
        return false;
    });

    $(\'.add_media\').on(\'click\', function(){
        _custom_media = false;
    });
});
和管理员。js的使用和外观符合我的要求,但不能准确地使用两个或多个输入:

jQuery(document).ready(function($){
    var custom_uploader;
    $(\'.media-upload-button\').click(function(e) {
        e.preventDefault();
        var button = $(this);
        var id = button.attr(\'id\').replace(\'_button\', \'\');
        console.log(id);
        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: \'Wybierz zdjęcie\',
            button: {
                text: \'Wybierz zdjęcie\'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field\'s value
        custom_uploader.on(\'select\', function() {
            attachment = custom_uploader.state().get(\'selection\').first().toJSON();
            $(\'#\'+id).val(attachment.url);
            //console.log(attachment);
            console.log(id);
            //custom_uploader.close();
        });

        //Open the uploader dialog
        custom_uploader.open();

    });
});

1 个回复
最合适的回答,由SO网友:Bainternet 整理而成

您可以移动wp。媒体填充到外部函数,该函数接受元素作为参数,并在单击事件时调用它,如下所示:

jQuery(document).ready(function($){
    $(\'.media-upload-button\').click(function(e) {
        e.preventDefault();
        upload_image($(this));
        return false; 
    });
});
function upload_image(el){
    var $ = jQuery;
    var custom_uploader;
    var button = $(el);
    var id = button.attr(\'id\').replace(\'_button\', \'\');
    if (custom_uploader) {
        custom_uploader.open();
        return;
    }

    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: \'Wybierz zdjęcie\',
        button: {
            text: \'Wybierz zdjęcie\'
        },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field\'s value
    custom_uploader.on(\'select\', function() {
        attachment = custom_uploader.state().get(\'selection\').first().toJSON();
        $(\'#\'+id).val(attachment.url);
        $(\'#\'+id).prev().attr(\'src\', attachment.url);
        //console.log(attachment);
        console.log(id);
        //custom_uploader.close();
    });

    //Open the uploader dialog
    custom_uploader.open();
}
这样一来,每次调用select事件时,您都会“覆盖”它,并且它实际上就是我在admin page class

结束