支持参数的自定义 wp.media

Question

如何设置 [添加媒体] 按钮，包括：

1. 正确的 wordpress [媒体] 用户界面

2. 在弹出窗口右侧有大小和对齐 UI

3. 可以自定义弹出标题和按钮

4. size 和 alignments 参数可以发回使用

原文由 Zac 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需尝试涵盖大多数解决方案：

1. 使用 tb_show("", "media-upload.php?type=image&TB_iframe=true"); 和 window.send_to_editor

   • 问题：没有标准的 wp.media UI

   • 在js代码中：

     jQuery("#my_button").click(function() {
        tb_show("", "media-upload.php?type=image&TB_iframe=true");
        return false;
    });
    window.send_to_editor = function(html) {
        console.log(html);
        tb_remove();
    }
   
   
   

2. 使用 wp.media({frame: 'post'})

   • 问题：无法自定义UI元素，如：标题、按钮

   • 在js代码中：

     function clearField(){
        #remove file nodes
        #...
    }
   
   
    var frame = wp.media({frame: 'post'});
   
   
    frame.on('close',function() {
        var selection = frame.state().get('selection');
        if(!selection.length){
            clearField();
        }
    });
   
   
    frame.on( 'select',function() {
        var state = frame.state();
        var selection = state.get('selection');
        if ( ! selection ) return;
   
   
        clearField();
   
   
        selection.each(function(attachment) {
            console.log(attachment.attributes);
        });
    });
   
   
    frame.open();
   
   
   

3. 使用 wp.media.editor 与 wp.media.editor.open( editor_id )

   • 问题：无法自定义UI元素，如：标题、按钮

   • 在 js 代码中： https://wordpress.stackexchange.com/questions/75808/using-wordpress-3-5-media-uploader-in-meta-box#75823

4. 使用 wp.media 与重写 wp.media.controller.Library attachment select

   • 问题：复杂…，但是一旦你理解了，一切就都有意义了，这就是我的最终解决方案

   • 在js代码中：

     /**
        * Please attach all the code below to a button click event
     **/
   
   
    //create a new Library, base on defaults
    //you can put your attributes in
    var insertImage = wp.media.controller.Library.extend({
        defaults :  _.defaults({
                id:        'insert-image',
                title:      'Insert Image Url',
                allowLocalEdits: true,
                displaySettings: true,
                displayUserSettings: true,
                multiple : true,
                type : 'image'//audio, video, application/pdf, ... etc
          }, wp.media.controller.Library.prototype.defaults )
    });
   
   
    //Setup media frame
    var frame = wp.media({
        button : { text : 'Select' },
        state : 'insert-image',
        states : [
            new insertImage()
        ]
    });
   
   
    //on close, if there is no select files, remove all the files already selected in your main frame
    frame.on('close',function() {
        var selection = frame.state('insert-image').get('selection');
        if(!selection.length){
            #remove file nodes
            #such as: jq("#my_file_group_field").children('div.image_group_row').remove();
            #...
        }
    });
   
   
    frame.on( 'select',function() {
        var state = frame.state('insert-image');
        var selection = state.get('selection');
        var imageArray = [];
   
   
        if ( ! selection ) return;
   
   
        #remove file nodes
        #such as: jq("#my_file_group_field").children('div.image_group_row').remove();
        #...
   
   
        //to get right side attachment UI info, such as: size and alignments
        //org code from /wp-includes/js/media-editor.js, arround `line 603 -- send: { ... attachment: function( props, attachment ) { ... `
        selection.each(function(attachment) {
            var display = state.display( attachment ).toJSON();
            var obj_attachment = attachment.toJSON()
            var caption = obj_attachment.caption, options, html;
   
   
            // If captions are disabled, clear the caption.
            if ( ! wp.media.view.settings.captions )
                delete obj_attachment.caption;
   
   
            display = wp.media.string.props( display, obj_attachment );
   
   
            options = {
                id:        obj_attachment.id,
                post_content: obj_attachment.description,
                post_excerpt: caption
            };
   
   
            if ( display.linkUrl )
                options.url = display.linkUrl;
   
   
            if ( 'image' === obj_attachment.type ) {
                html = wp.media.string.image( display );
                _.each({
                align: 'align',
                size:  'image-size',
                alt:   'image_alt'
                }, function( option, prop ) {
                if ( display[ prop ] )
                    options[ option ] = display[ prop ];
                });
            } else if ( 'video' === obj_attachment.type ) {
                html = wp.media.string.video( display, obj_attachment );
            } else if ( 'audio' === obj_attachment.type ) {
                html = wp.media.string.audio( display, obj_attachment );
            } else {
                html = wp.media.string.link( display );
                options.post_title = display.title;
            }
   
   
            //attach info to attachment.attributes object
            attachment.attributes['nonce'] = wp.media.view.settings.nonce.sendToEditor;
            attachment.attributes['attachment'] = options;
            attachment.attributes['html'] = html;
            attachment.attributes['post_id'] = wp.media.view.settings.post.id;
   
   
            //do what ever you like to use it
            console.log(attachment.attributes);
            console.log(attachment.attributes['attachment']);
            console.log(attachment.attributes['html']);
        });
    });
   
   
    //reset selection in popup, when open the popup
    frame.on('open',function() {
        var selection = frame.state('insert-image').get('selection');
   
   
        //remove all the selection first
        selection.each(function(image) {
            var attachment = wp.media.attachment( image.attributes.id );
            attachment.fetch();
            selection.remove( attachment ? [ attachment ] : [] );
        });
   
   
        //add back current selection, in here let us assume you attach all the [id] to <div id="my_file_group_field">...<input type="hidden" id="file_1" .../>...<input type="hidden" id="file_2" .../>
        jq("#my_file_group_field").find('input[type="hidden"]').each(function(){
             var input_id = jq(this);
            if( input_id.val() ){
                attachment = wp.media.attachment( input_id.val() );
                attachment.fetch();
                selection.add( attachment ? [ attachment ] : [] );
            }
        });
    });
   
   
    //now open the popup
    frame.open();
   
   
   

原文由 Zac 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我想添加到 ZAC 的选项 4，因为当我使用他的代码时，图像 src=“” 丢失了。

这是修复

                if ( 'image' === obj_attachment.type ) {
                html = wp.media.string.image( display );
                _.each({
                align: 'align',
                size:  'image-size',
                alt:   'image_alt'
                }, function( option, prop ) {
                if ( display[ prop ] )
                    options[ option ] = display[ prop ];
                });
                html = wp.media.string.image( display, obj_attachment );
            }

原文由 Wali Hassan 发布，翻译遵循 CC BY-SA 3.0 许可协议