Tôi đã đào qua mã nguồn vì một lý do tương tự; Tôi muốn thêm "Cài đặt hiển thị tệp đính kèm" vào khung "chọn" mặc định. Theo như tôi có thể nói, điều này không thể được thực hiện bằng cách chuyển tham số cho wp.media (), như tất cả chúng ta đều muốn. wp.media hiện có hai khung ("bài" và "chọn") và các chế độ xem đi kèm với chúng được đặt trước.
Cách tiếp cận tôi đang tìm kiếm bây giờ là mở rộng media.view.mediaFrame để tạo khung mới (dựa trên khung "chọn") bao gồm các phần của chế độ xem tôi cần. Nếu tôi làm việc này tôi sẽ đăng mã.
BIÊN TẬP:
Ian, tôi có tính năng tôi muốn làm việc và mất một thời gian để tìm ra tính năng của bạn. wp.media () không hoàn toàn như mô-đun như nó có thể. Nó chỉ chấp nhận các giá trị 'select' và 'post' cho khung, với 'select' là mặc định, vì vậy bạn không thể tạo một đối tượng khung mới. Thay vào đó, bạn cần mở rộng một trong hai đối tượng khung (tất cả điều này nằm trong /wp-includes/js/media-view.js), đây cũng là một loại khó hiểu. Thêm một phần của giao diện người dùng là một quá trình gồm nhiều bước. Bạn có thể bắt đầu với Chọn và thêm vào, nhưng đối với bạn, tôi đã chọn bắt đầu với mã trong khung Đăng và lấy đi các nội dung thư viện. Đây là mã của tôi, hoạt động nhưng không được kiểm tra nhiều. Có lẽ một số phòng để tinh giản, quá.
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'
});
}
});
Điều này kết hợp mã từ wp.media.view.MediaFrame.Post với mã đó từ media.view.MediaFrame.Select, điều chỉnh cho thực tế rằng điều này được thực hiện bên ngoài phạm vi ban đầu. Các giá trị cho văn bản là các nút khác nhau và bạn có thể tham chiếu đối tượng bản địa hóa của riêng mình nếu muốn. Giá trị 'có thể lọc' trong hàm tạo Thư viện (trong createStates ()) xác định loại phương tiện nào sẽ được hỗ trợ.
Khi bạn đã mở rộng đối tượng Chọn theo cách tiếp cận này, chỉ cần khởi tạo nó giống như hiện tại của bạn và thêm trình xử lý tùy chỉnh của bạn khi hình ảnh được chọn. Chèn từ Url có thể kích hoạt một sự kiện khác với khi chọn từ phương tiện được tải lên. Trên thực tế, có lẽ tốt hơn là khởi tạo khung hình của bạn, sau đó mở rộng nó, để bất kỳ khung phương tiện nào khác trên trang sẽ không bị ảnh hưởng, nhưng tôi đã không thử điều này.
Hy vọng rằng sẽ giúp-
