「URLから挿入」タブをカスタム3.5メディアアップローダーに追加する方法はありますか


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から挿入」タブも必要です/ページ。

ここに画像の説明を入力してください

Webを掘り下げ、ソースコードを読んで、アップローダーのバックエンドのDaryl Koopersmithのプレゼンテーションを見るのに数時間費やしましたが、理解できませんでした。

誰かが私を正しい方向に向けることができますか?それを含めるためにwp.media()に渡すことができるパラメーターがありますか、それを含む組み込みのビュー/モデルの1つを使用する必要がありますか?


ハッキングの解決策の手掛かりかもしれませんが、「ファイルを選択」をクリックすると、ファイルの場所ではなく、開いているファイルエクスプローラにURLを貼り付けることができます。
ワイク

オペレーティングシステムのOpen Fileモーダルについて話していますか?Fedoraではそれが機能しないため、OSに依存する可能性があります。これも分散プラグイン用であるため、UIは直感的である必要があります。
イアン・ダン

はい、正しい、それはいくつかのOSで動作します。
ワイク

回答:


10

同様の理由でソースコードを掘り下げてきました。デフォルトの「選択」フレームに「添付ファイルの表示設定」を追加したいと思います。私の知る限り、これはwp.media()にパラメーターを渡すことではできません。wp.​​mediaには現在2つのフレーム(「投稿」と「選択」)があり、それらに付随するビューはプリセットされています。

私が今見ているアプローチは、media.view.mediaFrameを拡張して、必要なビューの部分を含む新しいフレーム(「選択」フレームに基づく)を作成することです。これが機能するようになったら、コードを投稿します。

編集:

イアン、私は働きたい機能を手に入れ、あなたの機能を理解するのに時間がかかりました。wp.​​media()は、可能な限りモジュール化されていません。フレームの値「select」と「post」のみを受け入れ、「select」がデフォルトであるため、新しいフレームオブジェクトを作成することはできません。代わりに、2つのフレームオブジェクトのいずれか(これはすべて/wp-includes/js/media-views.jsにあります)を拡張する必要がありますが、これも不格好です。UIの一部を追加するには、いくつかのステップがあります。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からの挿入は、アップロードされたメディアから選択する場合とは異なるイベントを発生させる場合があります。最初にフレームをインスタンス化し、実際に拡張してから、ページ上の他のメディアフレームが影響を受けないようにする方がおそらく良いでしょうが、私はこれを試していません。

お役に立てば幸いです


ブレンダンに感謝します。それは私が出会ったのと同じ結論です。Postフレームを拡張しようとしましたが、すぐに機能させることができず、別のアプローチをとる必要がありました。ただし、動作するようになったら、コードを見たいです。
イアン・ダン

@IanDunnこの質問は数年前ですが、同じ解決策が必要であることがわかりました。テストされ成熟したソリューションを長年にわたって維持しましたか?または、ニーズに合ったプラグインまたは他のソリューションを見つけますか?現在のコードまたはソリューションがある場合、更新された回答として投稿できますか?ありがとう!
user658182

1

ソースコードを調べると、汎用メディアモーダルは「URLから挿入」をサポートしていないようです。このタブを取得できた1つの方法は、「ポスト」フレームタイプを指定することでした。

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がどのように行うかを確認します。(経由


プラグインがそれを行うかどうかにかかわらず、私はそれがどのようにそれを行うに興味があります、あなたは詳しく説明できますか?
トムJノウェル

メディアライブラリは、ローカルサーバーへの外部イメージのダウンロードを処理しませんか?表示されない場合でも、主な質問は次のとおりです。最初にタブを表示する方法を教えてください。
イアン・ダン

チェックしたところ、メディアライブラリはURLから挿入された画像をダウンロード/添付しません。それらに直接リンクするだけです。ただし、これは質問にはあまり関係ありませんが、モーダルに[URLから挿入]タブを追加する方法に関心があるだけです。
イアン・ダン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.