从 tinymce 插件弹出窗口打开/访问 WP 媒体库

Question

我正在为 Wordpress (4) 编辑器构建一个 tinymce 按钮插件。我的按钮打开的弹出窗口显示了一个包含多个字段的表单。其中之一是用于在 WP 媒体库中选择图像。我不知道如何实现这一目标。 如果这不可能，那么允许用户从 tinymce 插件弹出窗口中选择存储在 WP 媒体库中的图像的最佳方法是什么？

仅供参考，tinymce 插件会插入一个带有图像 src 作为属性的短代码。

谢谢！

Answer 1

我刚才遇到了同样的问题并找到了解决方案，所以我在这里分享它。我希望现在还不算太晚。

首先要能够使用 WP 添加媒体按钮，您必须将所需的脚本加入队列。这很简单，只需像这样调用 wp_enqueue_media() 函数：

add_action('admin_enqueue_scripts', 'enqueue_scripts_styles_admin');
function enqueue_scripts_styles_admin(){
    wp_enqueue_media();
}

此调用可确保您拥有使用 WP Media 按钮所需的库。

当然，您还应该有 HTML 元素来保存上​​传/选择的媒体文件 URL，如下所示：

<input type="text" class="selected_image" />
<input type="button" class="upload_image_button" value="Upload Image">

第一个文本字段将保存媒体文件的 URL，而第二个文本字段是用于打开媒体弹出窗口本身的按钮。

然后在你的 jscript 中，你会有这样的东西：

    var custom_uploader;

    $('.upload_image_button').click(function(e) {
        e.preventDefault();

        var $upload_button = $(this);

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            $upload_button.siblings('input[type="text"]').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });

现在我不会解释每一行，因为它并不难理解。最重要的部分是使用 wp 对象使所有这些工作。

棘手的部分是在 TinyMCE 弹出窗口上完成所有这些工作（这是我面临的问题）。我已经在 hi 和 lo 中搜索了解决方案，这对我有用。不过在此之前，我先说一下我遇到了什么问题。当我第一次尝试实现这一点时，我在弹出窗口本身遇到了“WP 未定义”的问题。要解决这个问题，您只需将 WP 对象传递给脚本，如下所示：

(function() {
tinymce.create('tinymce.plugins.someplugin', {
    init : function(ed, url) {
        // Register commands
        ed.addCommand('mcebutton', function() {
            ed.windowManager.open(
                {
                    file : url + '/editor_button.php', // file that contains HTML for our modal window
                    width : 800 + parseInt(ed.getLang('button.delta_width', 0)), // size of our window
                    height : 600 + parseInt(ed.getLang('button.delta_height', 0)), // size of our window
                    inline : 1
                },
                {
                    plugin_url : url,
                    wp: wp
                }
            );
        });

        // Register buttons
        ed.addButton('someplugin_button', {title : 'Insert Seomthing', cmd : 'mcebutton', image: url + '/images/some_button.gif' });
    }
});

// Register plugin
// first parameter is the button ID and must match ID elsewhere
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add('someplugin_button', tinymce.plugins.someplugin);

})();

我们感兴趣的是这一行 => "wp: wp" 。这一行确保我们将 wp 对象传递给当我们单击 tinymce 按钮时要打开的弹出窗口（实际上是一个 iframe...）。您实际上可以通过此对象（ed.windowManager.open 方法的第二个参数）将任何内容传递给弹出窗口！

最后但并非最不重要的一点是，您必须像这样在 javascript 上引用传递的 wp 对象：

    var args = top.tinymce.activeEditor.windowManager.getParams();
    var wp = args.wp;

确保在调用/使用 WP 对象之前执行此操作。

这就是完成这项工作所需要做的一切。它对我有用，我希望它对你有用:)

Answer 2

我取了 Paolo 的代码并对其进行了简化，以免有太多文件需要管理。另外，我没有设法让它像这样工作。

所以这个解决方案的代码更少，并且只使用一个文件。

只需将其放入您的 tinyMCE 插件 js 文件中即可：

(function(){
    tinymce.PluginManager.add('myCustomButtons', function(editor, url){
        editor.addButton('btnMedia', {
            icon: 'image',
            tooltip: 'Add an image',
            onclick: function() {
                editor.windowManager.open({
                    title: 'Add an image',
                    body: [{
                        type: 'textbox',
                        subtype: 'hidden',
                        name: 'id',
                        id: 'hiddenID'
                    },
                    {
                        type: 'textbox',
                        name: 'text',
                        label: 'Text',
                        id: 'imageText'
                    },
                    {
                        type: 'button',
                        text: 'Choose an image',
                        onclick: function(e){
                            e.preventDefault();
                            var hidden = jQuery('#hiddenID');
                            var texte = jQuery('#imageText');
                            var custom_uploader = wp.media.frames.file_frame = wp.media({
                                title: 'Choose an image',
                                button: {text: 'Add an image'},
                                multiple: false
                            });
                            custom_uploader.on('select', function() {
                                var attachment = custom_uploader.state().get('selection').first().toJSON();
                                hidden.val(attachment.id);
                                if(!texte.val()){
                                    if(attachment.alt)
                                        texte.val(attachment.alt);
                                    else if(attachment.title)
                                        texte.val(attachment.title);
                                    else
                                        texte.val('See the image');
                                }
                            });
                            custom_uploader.open();
                        }
                    }],
                    onsubmit: function(e){
                        var image = '<button data-id="'+e.data.id+'">'+e.data.text+'</button>';
                        editor.insertContent(image);
                    }
                });
            }
        });
    });
})();

前端 html 中的结果是一个按钮，该按钮在 data-id 属性中具有图像的 ID，以及要显示的文本（默认情况下，图像的 alt 或其标题或用户可以使用的文本写）。

然后，使用我的前端 js，我将获取相应的图像及其 ID，并将其显示在 ajax 弹出窗口中。

使用此解决方案，您可以将所有 js 函数放在一个文件中，无需将任何脚本排入队列，也无需创建 php 文件。

Answer 3

我知道它已经过时了，但如果其他人遇到同样的情况，上面的 Paolo 解决方案工作正常，但无需排队 wp_enqueue_media(); 这将加载一堆脚本，您只能加载 2 个脚本：

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'media-lib-uploader-js' );