如何将“Insert From URL”选项卡添加到自定义3.5 Media Uploader?

时间:2013-03-24 作者:Ian Dunn

我已经在一个小部件中插入了一个WP 3.5媒体上载程序,方法是在单击按钮时运行此JavaScript:

var frame = wp.media( {
    title       : \'Widget Uploader\',
    multiple    : false,
    library     : { type : \'image\' },
    button      : { text : \'Select Image\' }
} );

frame.on( \'close\', function() {
    var attachments = frame.state().get( \'selection\' ).toJSON();
    imageWidget.render( widget_id, widget_id_string, attachments[0] );
} );

frame.open();
return false;
这给了我一个模式,其中有“上载文件”和“媒体库”选项卡,但我也希望它有“从URL插入”选项卡,您可以在编辑帖子/页面时单击“添加媒体”按钮。

enter image description here

我花了几个小时在网上搜索,阅读源代码,观看Daryl Koopersmith\'s presentation on the uploader\'s backend, 但我还没弄明白。

有人能给我指出正确的方向吗?是否有一个参数可以传递给wp。media()来包含它,还是应该使用包含它的内置视图/模型之一?

3 个回复
SO网友:Brendan Gannon

出于类似的原因,我一直在挖掘源代码;我想将“附件显示设置”添加到默认的“选择”框架中。据我所知,这不能通过向wp传递参数来实现。media(),我们都喜欢。wp。媒体当前有两个帧(“post”和“select”),并且附带的视图是预设的。

我现在考虑的方法是扩展媒体。看法mediaFrame创建一个新框架(基于“select”框架),其中包括我需要的视图部分。如果我能做到这一点,我会发布代码。

EDIT:

伊恩,我得到了我想要的功能,花了一些时间来了解你的。wp。media()并不像它可能的那样模块化。它只接受frame的值“select”和“post”,默认值为“select”,因此无法创建新的frame对象。相反,您需要扩展两个框架对象中的一个(所有这些都在/wp-includes/js/media-views.js中),这也有点笨重。添加UI的一部分需要几个步骤。你可以从Select和add-on开始,但对于你的,我选择从Post框架中的代码开始,去掉gallery的内容。这是我的代码,正在运行,但没有经过严格测试。可能还有一些精简的空间。

wp.media.view.MediaFrame.Select = wp.media.view.MediaFrame.Select.extend({

            initialize: function() {
                wp.media.view.MediaFrame.prototype.initialize.apply( this, arguments );

                _.defaults( this.options, {
                    multiple:  true,
                    editing:   false,
                    state:    \'insert\'
                });

                this.createSelection();
                this.createStates();
                this.bindHandlers();
                this.createIframeStates();
            },

            createStates: function() {
                var options = this.options;

                // Add the default states.
                this.states.add([
                    // Main states.
                    new wp.media.controller.Library({
                        id:         \'insert\',
                        title:      \'Insert Media\',
                        priority:   20,
                        toolbar:    \'main-insert\',
                        filterable: \'image\',
                        library:    wp.media.query( options.library ),
                        multiple:   options.multiple ? \'reset\' : false,
                        editable:   true,

                        // If the user isn\'t allowed to edit fields,
                        // can they still edit it locally?
                        allowLocalEdits: true,

                        // Show the attachment display settings.
                        displaySettings: true,
                        // Update user settings when users adjust the
                        // attachment display settings.
                        displayUserSettings: true
                    }),

                    // Embed states.
                    new wp.media.controller.Embed(),
                ]);


                if ( wp.media.view.settings.post.featuredImageId ) {
                    this.states.add( new wp.media.controller.FeaturedImage() );
                }
            },

            bindHandlers: function() {
                // from Select
                this.on( \'router:create:browse\', this.createRouter, this );
                this.on( \'router:render:browse\', this.browseRouter, this );
                this.on( \'content:create:browse\', this.browseContent, this );
                this.on( \'content:render:upload\', this.uploadContent, this );
                this.on( \'toolbar:create:select\', this.createSelectToolbar, this );
                //

                this.on( \'menu:create:gallery\', this.createMenu, this );
                this.on( \'toolbar:create:main-insert\', this.createToolbar, this );
                this.on( \'toolbar:create:main-gallery\', this.createToolbar, this );
                this.on( \'toolbar:create:featured-image\', this.featuredImageToolbar, this );
                this.on( \'toolbar:create:main-embed\', this.mainEmbedToolbar, this );

                var handlers = {
                        menu: {
                            \'default\': \'mainMenu\'
                        },

                        content: {
                            \'embed\':          \'embedContent\',
                            \'edit-selection\': \'editSelectionContent\'
                        },

                        toolbar: {
                            \'main-insert\':      \'mainInsertToolbar\'
                        }
                    };

                _.each( handlers, function( regionHandlers, region ) {
                    _.each( regionHandlers, function( callback, handler ) {
                        this.on( region + \':render:\' + handler, this[ callback ], this );
                    }, this );
                }, this );
            },

            // Menus
            mainMenu: function( view ) {
                view.set({
                    \'library-separator\': new wp.media.View({
                        className: \'separator\',
                        priority: 100
                    })
                });
            },

            // Content
            embedContent: function() {
                var view = new wp.media.view.Embed({
                    controller: this,
                    model:      this.state()
                }).render();

                this.content.set( view );
                view.url.focus();
            },

            editSelectionContent: function() {
                var state = this.state(),
                    selection = state.get(\'selection\'),
                    view;

                view = new wp.media.view.AttachmentsBrowser({
                    controller: this,
                    collection: selection,
                    selection:  selection,
                    model:      state,
                    sortable:   true,
                    search:     false,
                    dragInfo:   true,

                    AttachmentView: wp.media.view.Attachment.EditSelection
                }).render();

                view.toolbar.set( \'backToLibrary\', {
                    text:     \'Return to Library\',
                    priority: -100,

                    click: function() {
                        this.controller.content.mode(\'browse\');
                    }
                });

                // Browse our library of attachments.
                this.content.set( view );
            },

            // Toolbars
            selectionStatusToolbar: function( view ) {
                var editable = this.state().get(\'editable\');

                view.set( \'selection\', new wp.media.view.Selection({
                    controller: this,
                    collection: this.state().get(\'selection\'),
                    priority:   -40,

                    // If the selection is editable, pass the callback to
                    // switch the content mode.
                    editable: editable && function() {
                        this.controller.content.mode(\'edit-selection\');
                    }
                }).render() );
            },

            mainInsertToolbar: function( view ) {
                var controller = this;

                this.selectionStatusToolbar( view );

                view.set( \'insert\', {
                    style:    \'primary\',
                    priority: 80,
                    text:     \'Select Image\',
                    requires: { selection: true },

                    click: function() {
                        var state = controller.state(),
                            selection = state.get(\'selection\');

                        controller.close();
                        state.trigger( \'insert\', selection ).reset();
                    }
                });
            },

            featuredImageToolbar: function( toolbar ) {
                this.createSelectToolbar( toolbar, {
                    text:  \'Set Featured Image\',
                    state: this.options.state || \'upload\'
                });
            },

            mainEmbedToolbar: function( toolbar ) {
                toolbar.view = new wp.media.view.Toolbar.Embed({
                    controller: this,
                    text: \'Insert Image\'
                });
            }

    });
这将合并来自wp的代码。媒体看法MediaFrame。从媒体发布。看法MediaFrame。选择,根据在原始范围外执行这一事实进行调整。文本的值是各种按钮,如果需要,可以引用自己的本地化对象。库构造函数(在createStates()中)中的“filterable”值确定支持哪些媒体类型。

一旦用这种方法扩展了Select对象,只需以当前相同的方式实例化它,并为选择图像时添加自定义处理程序。“从Url插入”可能会引发与从上载媒体中拾取不同的事件。实际上,最好先实例化您的帧,然后扩展它,这样页面上的任何其他媒体帧都不会受到影响,但我还没有尝试过这样做。

希望有帮助-

SO网友:KalenGi

从源代码来看,通用媒体模式似乎不支持“从URL插入”。获取该选项卡的一种方法是指定“post”帧类型:

var frame = wp.media( {
                            title       : \'Widget Uploader\',
                            multiple    : false,
                            library     : { type : \'image\' },
                            button      : { text : \'Select Image\' },
                            frame      : \'post\'
                        } );
缺点是忽略了指定模态的标题。

SO网友:fregante

关键是,该选项卡返回一个要直接插入帖子的外部URL,而小部件应该返回一个媒体ID。基本上,外部图像需要传输到服务器上。

查看插件如何/是否Grab & Save 做你想做的事。(via)

结束

相关推荐

Wp.media更新选项和在上载程序上强制渲染

Elliot来自“高级自定义字段”插件。我正在将新的WP 3.5上传程序集成到ACF插件中,但根本找不到关于新上传程序的太多文档!创建上传器框架很容易,可以这样做:// Create the media frame. acf.media = wp.media({ title : \'title\', button : { text: \'button\', }, multiple: true });&#