Open / access the WP Media library from the tinymce plugin popup

Question

I am creating a tinymce button plugin for a Wordpress editor (4). A popup window opened by my button displays a form with several fields. One of them is the choice of the image inside the WP media library. I can’t figure out how to achieve this. If this is not possible, what would be the best way to allow the user to select the image stored in the WP library from the tinymce plugin popup?

FYI, the tinymce plugin inserts a short code with an src image as an attribute.

thanks!

Answer 1

I had the same problem just now, and I found a solution, so I share it here. Hope it's not too late.

First of all, to use the WP Add Media button, you will need to install the script you need. It's easy, just call the wp_enqueue_media () function as follows:

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 libraries to use the WP Media button.

Of course, you should also have HTML elements to store the loaded / selected URL of the media file, something like this:

 <input type="text" class="selected_image" /> <input type="button" class="upload_image_button" value="Upload Image"> 

In the first text box, the URL of the media file will be displayed, and the second is the button for opening the media pop-up window.

Then in your jscript you will 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 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(); }); 

Now I will not explain each line, because it is not so difficult to understand. The most important part is the one that uses the wp object to make it all work.

The tricky part is doing all this work on the TinyMCE popup (which I came across). I was looking for hi and lo for a solution, and here is what worked for me. But before that I will talk about what I encountered in the first place. When I first tried to implement this, I ran into the "WP is undefined" problem in a popup. To solve this problem, you just need to pass the WP object to the script as follows:

 (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); })(); 

We are interested in this line => "wp: wp". This line ensures that we pass the wp object to the popup (iframe really ...), which should be open when we click the tinymce button. In fact, you can transfer something to the popup through this object (the second parameter of the ed.windowManager.open method)!

Last but not least, you will need to reference this passed wp object in your javascript:

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

Make sure you do this before calling / using the WP object.

That is all you need to do to make this work. It worked for me, hope it works for you :)

Answer 2

I know this for a long time, but if someone else is faced with the same situation, the Paolo solution above works fine, but you do not need to insert wp_enqueue_media(); this will load a bunch of scripts, you can only load 2 scripts:

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

Answer 3

I took the Paolo code and simplified it so as not to have a lot of files to manage. In addition, I could not get it to work as follows.

So this solution has less code and uses only one file.

Just put this in your jiny tinyMCE files:

 (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); } }); } }); }); })(); 

The result in the html interface is a button that has the image identifier in the data identifier attribute and the displayed text (the default image height or its name or text that the user can write).

Then, with my js interface, I will get the corresponding image with its identifier and show it in the ajax popup.

With this solution, you have all your js functions in one file, and you do not need to queue any script or create a php file.