如何将“从URL插入”选项卡添加到自定义3.5 Media Uploader?


17

当单击按钮时,通过运行此JavaScript,我已将WP 3.5媒体上传器插入到小部件中:

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插入”选项卡/页。

在此处输入图片说明

我已经花了几个小时在网上进行挖掘,阅读了源代码,并观看了Daryl Koopersmith在上载者后端的演示,但是还没有弄清楚。

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


也许是破解解决方案的线索,但是当您单击“选择文件”时,您可以将URL粘贴到打开的文件资源管理器中,而不是文件位置。
Wyck

您是在谈论操作系统的“打开文件”模式吗?在Fedora中,这对我不起作用,因此可能取决于操作系统。这也适用于分布式插件,因此UI需要直观。
伊恩·邓恩

是的,它可以在某些操作系统上运行。
Wyck

Answers:


10

由于相似的原因,我一直在研究源代码。我想将“附件显示设置”添加到默认的“选择”框架。据我所知,这不可能通过将参数传递给wp.media()来完成,正如我们都希望的那样。wp.​​media当前具有两个框架(“ post”和“ select”),并且伴随它们的视图是预设的。

我现在正在寻找的方法是扩展media.view.mediaFrame以创建一个新框架(基于“选择”框架),该框架包括我所需的视图部分。如果我能正常工作,我将发布代码。

编辑:

Ian,我得到了想要使用的功能,并花了一些时间弄清楚您的功能。wp.​​media()并不是模块化的。它仅接受frame的值“ select”和“ post”,其中“ select”是默认值,因此您无法创建新的框架对象。相反,您需要扩展两个框架对象之一(所有这些都在/wp-includes/js/media-views.js中),这也有点笨拙。添加UI的一部分需要几个步骤。您可以从“选择并添加”开始,但是对于您来说,我选择从“帖子”框架中的代码开始,并删除图库内容。这是我的代码,可以运行,但未经严格测试。可能还有一些精简空间。

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.media.view.MediaFrame.Post中的代码与media.view.MediaFrame.Select中的代码组合在一起,以适应在原始范围之外执行的事实。文本的值是各种按钮,您可以根据需要引用自己的本地化对象。库构造函数(在createStates()中)中的“ filterable”值确定将支持哪些媒体类型。

使用此方法扩展Select对象后,只需以当前方式实例化它,然后为选择图像时添加自定义处理程序即可。与从上载媒体中选取媒体时相比,从网址插入广告可能会引发不同的事件。实际上,最好先实例化您的框架,然后再扩展它,这样页面上的所有其他媒体框架都不会受到影响,但是我没有尝试过。

希望有帮助-


谢谢布伦丹,我得出的结论是相同的。我尝试扩展Post框架,但无法使其快速工作,因此不得不采取其他方法。不过,如果您能正常运行,我很想看看代码。
伊恩·邓恩

@IanDunn这个问题已有好几年了,但是我发现我需要相同的解决方案。经过多年测试和成熟,您是否维护了解决方案?还是找到满足您需求的插件或其他解决方案?如果您有当前代码或解决方案,可以将其发布为更新的答案吗?谢谢!
user658182

1

从源代码的源代码看,通用媒体模式似乎不支持“从URL插入”。我能够获得该标签的一种方法是指定“发布”框架类型:

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

缺点是指定模态的标题将被忽略。


这确实可以部分起作用,但是按钮显示“ Insert into Post”(插入帖子),并且实际上没有提交任何内容,这可能是因为它希望放在帖子上,而不是在小部件内。它还添加了我不需要的“创建库”选项卡,因为这些选项卡无法插入到小部件中。
伊恩·邓恩

0

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

查看插件Grab&Save如何/是否满足您的要求。(通过


阉插件确实与否,我会很感兴趣地看怎么它做它,你可以ellaborate?
汤姆·J·诺维尔

媒体库不是为您处理将外部映像下载到本地服务器吗?即使没有,主要问题是:如何使标签首先显示?
伊恩·邓恩

我检查了一下,媒体库没有下载/附加从URL插入的图像。它只是直接链接到他们。不过,这与问题并没有真正的关系,我只关心如何将“从URL插入”选项卡添加到模式中。
伊恩·邓恩
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.