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弹出窗口上（这是我遇到的问题）。我已经搜索过你的解决方案，这对我有用。但在此之前，我会先谈谈我遇到的问题。当我第一次尝试实现它时，我在弹出窗口本身遇到了“WP is undefined”问题。要解决这个问题，您只需将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);

})();

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

最后但并非最不重要的是你必须引用你的javascript传递wp对象，如下所示：

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

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

这就是你要做的所有工作。它对我有用，我希望它适合你：）

Answer 2

我知道它已经老了但是如果其他人面临同样的情况，上面的保罗解决方案工作正常但不需要排队wp_enqueue_media();这会加载一堆脚本，你只能加载2个脚本：

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

Answer 3

我拿了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文件。

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

3 个答案: