wp.​​mce.views图库覆盖默认的'editor-gallery'模板

时间:2015-07-22 00:50:33

标签: javascript wordpress tinymce

在4.2之前,我们可以使用以下代码覆盖默认的MCE图库模板:

var galleryview = wp.mce.views.get('gallery');
galleryview.getContent = function(){
  this.template = media.template( 'editor-gallery-dtbaker-flexslider' );
  return this.template(this.shortcode.attrs.named);
}

这不再有效。有没有办法覆盖默认的“图库”视图而无需重新注册?这是有效的(通过复制和修改mce-view.js中的默认代码),但我觉得应该有一种比重新注册整个视图更好的方法。

在mce视图重写后这可能吗? https://core.trac.wordpress.org/ticket/31412

这里的代码适用于4.2:

add_action( 'admin_print_footer_scripts', 'my_admin_footer_scripts', 100 );
function my_admin_footer_scripts(){ ?>
<script type="text/javascript">
( function( $ ) {
// start code copied from mce-view.js
var postID = $( '#post_ID' ).val() || 0;
var custom_gallery = _.extend( {}, {

    edit: function( text, update ) {
        var media = wp.media[ this.type ],
            frame = media.edit( text );

        this.pausePlayers && this.pausePlayers();

        _.each( this.state, function( state ) {
            frame.state( state ).on( 'update', function( selection ) {
                update( media.shortcode( selection ).string() );
            } );
        } );

        frame.on( 'close', function() {
            frame.detach();
        } );

        frame.open();
    },
    state: [ 'gallery-edit' ],
    template: wp.media.template( 'editor-gallery' ),

    initialize: function() {
        var attachments = wp.media.gallery.attachments( this.shortcode, postID ),
            attrs = this.shortcode.attrs.named,
            self = this;

        if(typeof attrs.slider != 'undefined'){
            switch(attrs.slider){
                case 'flexslider':
                    this.template = wp.media.template( 'editor-gallery-dtbaker-flexslider' );
                    break;
                case 'flex':
                    this.template = wp.media.template( 'editor-gallery-dtbaker-flex' );
                    break;
                default:
                // leave the existing template (editor-gallery)
            }
        }
        attachments.more()
            .done( function() {
                attachments = attachments.toJSON();
                _.each( attachments, function( attachment ) {
                    if ( attachment.sizes ) {
                        if ( attrs.size && attachment.sizes[ attrs.size ] ) {
                            attachment.thumbnail = attachment.sizes[ attrs.size ];
                        } else if ( attachment.sizes.thumbnail ) {
                            attachment.thumbnail = attachment.sizes.thumbnail;
                        } else if ( attachment.sizes.full ) {
                            attachment.thumbnail = attachment.sizes.full;
                        }
                    }
                } );
                self.render( self.template( {
                    attachments: attachments,
                    columns: attrs.columns ? parseInt( attrs.columns, 10 ) : wp.media.galleryDefaults.columns
                } ) );
            } )
            .fail( function( jqXHR, textStatus ) {
                self.setError( textStatus );
            } );
    }
} );
wp.mce.views.unregister('gallery');
wp.mce.views.register('gallery',custom_gallery);
})(jQuery);
<?php }

我也试过这个,不去了:

            var dtbaker_gallery = wp.mce.views.get('gallery');
            dtbaker_gallery = dtbaker_gallery.extend({
                template: wp.media.template( 'editor-gallery-dtbaker-flexslider' )
            });

0 个答案:

没有答案