wordpress - Open/Access WP Media library from tinymce plugin popup window -
I am creating a tiny buttons plugin for the Wordpress (4) editor. The popup window that opens my button displays a form with many fields. One of them is to select an image inside the WP Media Library. How can I not imagine how to achieve this? If this is not possible, then what would be the best way for a user to select an image stored in a WP Media Library from a Tinx Plugin popup window?
FYI, the Tinyes plugin incorporates a shortcode with an image source as a feature.
Thank you!
I just had a problem and got a solution, so I'm sharing it here. I hope this is not for a long time.
You must first encrypt the script to be able to use the WP Add Media button. It's easy, just call such wp_enqueue_media () function:
add_action ('admin_enqueue_scripts', 'enqueue_scripts_styles_admin'); Function enqueue_scripts_styles_admin () {wp_enqueue_media (); } This call ensures that you have the necessary library to use the WP Media Button.
Of course you must also have an HTML element to place the uploaded / selected media file url, something like this:
The first text field will place the URL of the media file, while the other medium has a button to open the popup window.
Then in your JScript, you have something like this:
var custom_uploader; $ ('. Upload_image_button'). Click (function (e) {e.preventDefault (); var $ upload_button = $ (this); // increase wp.media object custom_uploader = wp.media.frames.file_frame = wp media ({title: 'image select ',' Button: {text: 'select image'}, multiple: incorrect}); // When a file is selected, grab the URL and set it as the value of the text field custom_uploader.on ('selection' , Get the function () {var attachment = custom_uploader.state (). ('Selection') first (). ToJSON (); $ upload_button.siblings ('input [type = "text"]'). Val (attachment .url);}); // Open uploader dialog custom_uploader.o Pen ();}); Now I am not going to understand every line because it is not difficult to understand. The most important part is those who do all these work by using WP objects.
The hard part is working on a Tiny MEEE popup (which is the problem I have encountered). I have searched the solution for Hi and Lo and what has worked for me here but before that, what was the problem I was facing before, will talk about it when I tried to implement it for the first time The "WP undefined" problem was encountered on the popup. To solve this, you just have to pass a WP object like this script:
(function () {tinymce.create ('tinymce.plugins.someplugin', {init: function ) Ed, url) // register command ed.addCommand ('mcebutton', function () {ed.windowManager.open ({file: url + '/editor_button.php', // file in which for our modal window width HTML contains: 800+ parseInt (ed.getLang ('button.delta_width', 0)), // Size of our window height: 600+ parseInt (ed.getLang ('button.delta_height', 0)), / / Our size window inline: 1}, {plugin_url: url, wp: wp});}); // register button ed.addButton ('someplugin_button', {title: 'insert cheaming', CMD: 'messbutton', image: url + '/images/some_button.gif'});}}); // register plugin // must first match the parameter button ID and the second number must match the ID // second parameter should match the first parameter of tinymce.create () function tinymce.PluginManager.add ('someplugin_button', tinymce.plugins .someplugin);}) (); What are we interested in this line = & gt; "Wp: wp" This line ensures that we are passing the wp object to the pop object window (actually an iframe ...), when we click the tiny button, you can actually popup through this object Can pass anything in the window (Ed.windo manager.other parameter of the Open Mode)!
Last but at least you have to give context that you have wp object such javascript:
var args = top.tinymce.activeEditor.windowManager.getParams (); Var wp = args.wp; Before calling / using WP objects, make sure that you do this.
To do this, you have to do this work, it has worked for me, I hope this will work for you :)
Comments
Post a Comment