WordPress 3.5媒体管理器-添加按钮

时间：2013-01-09 作者：Marcin Bobowski

在我的插件中，我想向Media Manager添加两个按钮（在“Media toolbar primary”部分的“Insert Into Post”左侧），并将jQuery操作连接到该按钮。

第一个-根据选择的选项值，“全选”按钮应允许选择所有可用图像（仅图像）（如所有媒体项目、上载到此帖子等）。因此，如果选择“所有媒体项目”，则会选择所有可用图像，如果选择“上载到此帖子”，则只会选择附加到当前帖子的图像第二个按钮返回的代码可能是这样的：

<ul>
  <li><img src="full/path/to/001.jpg" alt="alt text 1" /></li>
  <li><img src="full/path/to/002.jpg" alt="alt text 2" /></li>
  <li><img src="full/path/to/003.jpg" alt="alt text 3" /></li>
  <li><img src="full/path/to/004.jpg" alt="alt text 4" /></li>
  <li><img src="full/path/to/005.jpg" alt="alt text 5" /></li>
</ul>
据我所知，唯一的方法是使用覆盖适当的主干视图，但除此之外，我现在只知道这些。

谢谢你的帮助。

5 个回复
最合适的回答,由SO网友:aesqe 整理而成

这段代码将在“插入帖子”旁边添加一个按钮。单击后，它会将选定的图像发送到WP editor，每个图像都包装在模板HTML中：

var wpMediaFramePost = wp.media.view.MediaFrame.Post;
wp.media.view.MediaFrame.Post = wpMediaFramePost.extend(
{
    mainInsertToolbar: function( view )
    {
        "use strict";

        wpMediaFramePost.prototype.mainInsertToolbar.call(this, view);

        var controller = this;

        this.selectionStatusToolbar( view );

        view.set( "customInsertIntoPost", {
            style: "primary",
            priority: 80,
            text: "Insert selected images into post",
            requires: { selection: true },

            click: function()
            {
                var state = controller.state(),
                    selection = state.get("selection")._byId,
                    template = _.template(\'<li><img src="<%= imagePath %>" alt="<%= altText %>" /></li>\'),
                    output = "<ul>";

                _.each(selection, function( item )
                {
                    if( item.attributes.type === "image" )
                    {
                        output += template({
                            imagePath: item.attributes.sizes.full.url,
                            altText: item.attributes.alt
                        });
                    }
                });

                output += "</ul>";

                send_to_editor(output);
            }
        });
    }
});
添加自定义按钮不是问题。但选择“所有图像”可能有点棘手，因为WP 3.5 media browser会逐点加载附件。我将对此进行研究，但我建议手动选择附件。

SO网友:bueltge

编写一个小插件，使用以下示例源代码在叠加弹出窗口中的媒体管理器左侧边栏列表中添加一个项目。

以下来源的结果：enter image description here

add_action( \'admin_footer-post-new.php\', \'wpse_78881_script\' );
add_action( \'admin_footer-post.php\', \'wpse_78881_script\' );
function wpse_78881_script() {
    ?>
    <script type="text/javascript">
        jQuery(window).on(\'load\', function() {
            var media   = window.wp.media,  
            Attachment  = media.model.Attachment,
            Attachments = media.model.Attachments,
            Query       = media.model.Query,
            l10n        = media.view.l10n = typeof _wpMediaViewsL10n === \'undefined\' ? {} : _wpMediaViewsL10n,
            My_new_item = undefined,
            Item_string = \'New Item!\';

            jQuery(document).on( \'click\', \'.insert-media\', function( event ) {
                var workflow = wp.media.editor.get();
                var options  = workflow.options;

                if ( undefined == My_new_item ) {
                    // see for wp.media.view.RouterItem also: wp-includes/js/media-views.js
                    My_new_item = new wp.media.view.RouterItem( _.extend( options, { text: Item_string } ) );
                    workflow.menu.view.views.set( \'.media-menu\', My_new_item, _.extend( options, { add: true } ) );
                }

            });
        });
    </script>
    <?php
}
初始溶液形式this WPSE Answer.

  • Link to draft plugin 示例将javascript菜单添加到WP3中。5媒体库弹出窗口

    • SO网友:Elliott

    Thomas Griffin创建了一个插件示例，New Media Image Uploader, 关于如何使用新媒体管理器。

    该插件提供了一个将新的media manager工作流集成到插件/主题中的坚实示例，向您展示了如何将图像文件上载/插入到文本字段中

    SO网友:Fabien Quatravaux

    我对你的问题没有完整的答案，但这是一个好的开始。要定制新的媒体管理器，您应该在中学习javascript主干代码wp-includes/js/media-views.js. 例如，这里有一个小插件，它在“从URL插入”工具栏中添加了一个“全选”按钮：

    custom.php:

    add_action(\'admin_enqueue_scripts\', \'custom_add_script\');
function custom_add_script(){
    wp_enqueue_script(\'custom\', plugins_url(\'custom.js\', __FILE__), array(\'media-views\'), false, true);
}
    custom.js:

    var originalToolbar = wp.media.view.Toolbar.Embed;
wp.media.view.Toolbar.Embed = originalToolbar.extend({
    // code modified from media-views.js, l 2500
    initialize: function() {

        this.options.items = _.defaults( this.options.items || {}, {
            // keep the original button
            select: {
                style:    \'primary\',
                text:     wp.media.view.l10n.insertIntoPost,
                priority: 80,
                click:    this.clickSelect,
                requires: false
            },
            // and add a new one
            selectAll: {
                text: \'Select All\',
                style: \'primary\',
                priority: 80,
                requires: false,
                click: this.selectAll
            }
        });

        wp.media.view.Toolbar.Select.prototype.initialize.apply( this, arguments );
    },

    selectAll: function(){
        console.log(\'select All\');
    }
});
    对于“自定义插入帖子”按钮，我建议改用gallery快捷码。用户界面已经存在，可以选择所需的图像并在tinymce的正确位置插入快捷码。你所要做的就是编写自己的图库短代码格式。

    看看gallery_shortcode 中的函数wp-includes/media.php 并使用post_gallery 滤器

    SO网友:Dameian

    我刚刚在WP 3.6中遇到了一个案例，其中aesqe（非常有用）的答案导致图像被插入两次，因为主干state.get("selection")._byId 包括两者id 和cid 对于选定的每个图像。

    正在更改state.get("selection")._byId 到state.get("selection").models 为我修复了这个问题，同时保留了每个对象的属性。

    希望这能帮某人省去一些挫折。我会把这篇文章作为评论而不是回答，但是，唉，我没有声誉。

    结束
    标签： plugins   jquery   media   media-library   media-modal   小码农  

    相关推荐

    自定义字段后端的jQuery

    我需要一些帮助，因为我想在编辑后屏幕上的一些自定义字段上使用jquery（可能还有css）。我真正需要的是制造，和。当用户键入一个数字时，神奇地显示为apear：类型100，jquery将其设置为1,00，依此类推。我使用插件类型创建的自定义字段名为wpcf imovel preco。我不知道如何使用jquery操作后端的元素：（，仅此一点就很有帮助，所以我知道从哪里开始！