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

Question

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

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

谢谢 !

Answer 1

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

首先要能够使用 WP Add Media 按钮，您必须将所需的脚本排入队列。这很简单，只需像这样调用 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 对象之前执行此操作。

这就是您要做的全部工作。它对我有用，我希望它对你有用:)