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

Question

我正在为Wordpress (4)编辑器构建一个tinymce按钮插件。我的按钮打开的弹出窗口显示一个包含多个字段的表单。其中一个是用于选择WP媒体库中的图像。我不知道如何做到这一点。如果这是不可能的，什么是最好的方式，让用户选择存储在可湿性粉剂媒体库中的图像从tinymce插件弹出窗口？

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

谢谢！

Answer 1

我刚刚遇到了同样的问题，并找到了解决方案，所以我在这里分享它。我希望现在还来得及。

首先，为了能够使用可湿性粉剂添加媒体按钮，您将必须排队所需的脚本。这很简单，只需像这样调用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对象传递给弹出窗口(真的是一个iframe ...)这是当我们点击tinymce按钮时打开的。你可以通过这个对象( 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' );