做同一件事的两种方法:
第一个:
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();
});
});