从tinymce插件弹出窗口打开/访问WP Media库 [英] Open/Access WP Media library from tinymce plugin popup window
问题描述
我正在为Wordpress(4)编辑器构建一个tinymce按钮插件.我的按钮打开的弹出窗口显示带有多个字段的表单.其中之一是用于在WP媒体库中选择图像.我不知道如何实现这一目标. 如果不可能，那么允许用户从tinymce插件弹出窗口中选择存储在WP媒体库中的图像的最佳方法是什么?
I'm building a tinymce button plugin for the Wordpress (4) editor. The popup window that my button opens displays a form with several fields. One of them is for selecting an image inside the WP media library. I can't figure how to achieve this. If that's not possible, what would be the best way to allow the user to select an image stored in the WP media library from a tinymce plugin popup window ?
仅供参考，tinymce插件会插入一个以图片src作为属性的简码.
FYI, the tinymce plugin inserts a shortcode with an image src as an attribute.
谢谢！
推荐答案
我刚才遇到了同样的问题，并找到了解决方案，所以我在这里共享它.我希望不会太晚.
I had the same problem just now and found the solution so I'm sharing it here. I hope it's not too late.
首先要能够使用WP Add Media按钮，必须先排队所需的脚本.这很容易，只需像这样调用wp_enqueue_media()函数:
First to be able to use WP Add Media button you would have to enqueue the needed script. This is easy, just call the wp_enqueue_media() function like so:
add_action('admin_enqueue_scripts', 'enqueue_scripts_styles_admin');
function enqueue_scripts_styles_admin(){
wp_enqueue_media();
}
此调用可确保您具有使用WP Media按钮所需的库.
This call ensures you have the needed libraries to use the WP Media button.
当然，您还应该具有HTML元素来保存上载/选定的媒体文件URL，如下所示:
Of course you should also have the HTML elements to hold the uploaded/selected media file URL, something like this:
<input type="text" class="selected_image" />
<input type="button" class="upload_image_button" value="Upload Image">
第一个文本字段将保存媒体文件的URL，第二个文本字段是用于打开媒体弹出窗口本身的按钮.
The first text field will hold the URL of the media file while the second is a button to open the media popup window itself.
然后在您的jscript中，您将得到以下内容:
Then in your jscript, you'd have something like this:
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对象使所有这些东西都能正常工作的部分.
Now I'm not going to explain every line because it's not that hard to understand. The most important part is the one that uses the wp object to make all these to work.
棘手的部分是让所有这些工作都在TinyMCE弹出窗口上进行(这是我面临的问题).我已经在hi和lo中寻找解决方案，这就是对我有用的方法.但是在此之前，我将先谈谈我遇到的问题.当我第一次尝试实现此功能时，我在弹出窗口本身遇到了"WP is undefined"问题.要解决此问题，只需将WP对象传递给脚本，如下所示:
The tricky part is making all these work on a TinyMCE popup(which is the problem I faced). I've searched hi and lo for the solution and here's what worked for me. But before that, I'll talk about what problem I encountered first. When I first tried to implement this, I encountered the "WP is undefined" problem on the popup itself. To solve this, you just have to pass the WP object to the script like so:
(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方法的第二个参数)将任何内容传递给弹出窗口！
What we're interested in is this line => "wp: wp" . This line ensures that we are passing the wp object to the popup window (an iframe really...) that is to be opened when we click the tinymce button. You can actually pass anything to the popup window via this object (the 2nd parameter of the ed.windowManager.open method)!
最后但并非最不重要的一点是，您必须像这样在JavaScript上引用通过wp对象的对象:
Last but not the least you'd have to reference that passed wp object on your javascript like so:
var args = top.tinymce.activeEditor.windowManager.getParams();
var wp = args.wp;
在调用/使用WP对象之前，请确保已执行此操作.
Make sure you do that before calling/using the WP object.
这就是您要做的所有事情.它对我有用，我希望对你有用:)
That's all you have to do to make this work. It worked for me, I hope it works for you :)
这篇关于从tinymce插件弹出窗口打开/访问WP Media库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
