Как добавить вкладку «Вставить из URL» в пользовательский медиа-загрузчик 3.5?

Я вставил загрузчик мультимедиа 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», которую вы получаете, когда нажимаете кнопку «Добавить мультимедиа» при редактировании сообщения. / стр.

Я провел пару часов, копаясь в Интернете, читая исходный код и наблюдая за презентацией Дэрила Куперсмита на бэкэнде загрузчика , но так и не смог выяснить это.

Может ли кто-нибудь указать мне правильное направление? Есть ли параметр, который я могу передать wp.media (), чтобы включить его, или я должен использовать один из встроенных видов / моделей, который его включает?

Я копался в исходном коде по той же причине; Я хотел бы добавить «Настройки отображения вложений» в рамку «Выбрать» по умолчанию. Насколько я могу судить, это не может быть сделано путем передачи параметров в wp.media (), как нам всем хотелось бы. В настоящее время wp.media имеет два кадра («post» и «select»), и представления, которые их сопровождают, предустановлены.

Подход, который я сейчас рассматриваю, заключается в расширении media.view.mediaFrame для создания нового фрейма (на основе фрейма «select»), который включает в себя части нужного мне представления. Если я заработаю, я выложу код.

РЕДАКТИРОВАТЬ:

Йен, я получил функцию, которую хотел поработать, и потратил некоторое время, чтобы выяснить твою. wp.media () не так модульна, как могла бы быть. Он принимает только значения «select» и «post» для фрейма, при этом «select» является значением по умолчанию, поэтому вы не можете создать новый объект фрейма. Вместо этого вам нужно расширить один из двух объектов фрейма (все это находится в /wp-include/js/media-views.js), что также довольно неуклюже. Добавление части пользовательского интерфейса состоит из нескольких этапов. Вы можете начать с Select и добавить, но для вашего я решил начать с кода в рамке Post и убрать вещи из галереи. Вот мой код, работающий, но не сильно проверенный. Вероятно, есть место и для рационализации.

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 ()) определяет, какие типы носителей будут поддерживаться.

После того, как вы расширили объект Select с помощью этого подхода, просто создайте его экземпляр таким же образом, как в настоящее время, и добавьте свой пользовательский обработчик для выбора изображения. Вставка из URL может инициировать событие, отличное от выбора при загрузке с носителя. Вероятно, было бы лучше сначала создать экземпляр вашего фрейма, а затем расширить его, чтобы другие медиа-фреймы на странице не пострадали, но я этого не пробовал.

Надеюсь, это поможет-

Судя по исходному коду, типовой медиа-модал не поддерживает «Вставка из URL». Единственный способ получить эту вкладку - указать тип фрейма "post":

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

Недостатком является то, что заголовок указанного модала игнорируется.

Дело в том, что эта вкладка возвращает внешний URL-адрес, который должен быть непосредственно вставлен в сообщение, а виджет должен возвращать идентификатор медиа. В основном, внешнее изображение должно быть загружено на сервер.

Посмотрите, как / делает ли плагин Grab & Save то, что вы хотите. ( через )