Use WordPress Media Manager With TinyMCE

This tutorial will show you how to take the media manager from WordPress and use it on an external page with a stock version of TinyMCE. I saw some posts about this and people were calling the WordPress editor to achieve this. Its an option, but it is not what this guide is for. If you have downloaded a standard version of TinyMCE and want the be able to browse and upload images using the WordPress media manager then this guide will show you how to do it. There are several file managers for TinyMCE, all which work perfectly fine. I have always found the WordPress media manager to be very powerful and easy to use. Unfortunately its part of WordPress and cant be downloaded on its own. Thankfully I have been able to find a way to use the media uploader within TinyMCE a lot more easy than i though. Here is how to use WordPress media manager with TinyMCE.

The first thing you will need to do is be able to load up the WordPress media manager on the page you are using. This means you need to either load the core of WordPress or just call the media method from WP. The following code will load the WordPress core and que all of the files you need to be able to call the media manager.

require_once( 'wp-load.php' );
wp_enqueue_media();

The next thing to do is create a javascript function that will load up the WordPress media manager. The following function will do this and will then return the selected image to the instance of TinyMCE that triggered it. The reason for this, is you may have more than one instance of TinyMCE on the page and you want to make sure you return data to the correct one.

<script type="text/javascript">
function wpmediabrowser(field_name, url, type, win)
{
	var image = wp.media({ 
		title: 'Upload Image',
		multiple: false
	}).open().on('select', function(e){
	var uploaded_image = image.state().get('selection').first();
		jQuery("#" + field_name).val(uploaded_image["attributes"]["url"]);
		var arr = field_name.split('-');
		var field = arr[0];
		var number = parseInt(field.split('_')[1]) + 1;
		var descriptionid = field.split('_')[0] + "_" + number;
		jQuery("#" + descriptionid).val(uploaded_image["attributes"]["description"]);
	});
}
</script>

You can test if the function works by calling it using a href. The final step to do is to link this function in with the init of TinyMCE. The following code is all you need

"file_browser_callback: wpmediabrowser,";

This variable in the TinyMCE init will tell the app that you are using a file manager and to call a function called “wpmediabrowser” when the browse button is clicked. When you select the image from the WordPress file manager it will return the image url back into the box.

Related Articles

Related Questions

Which Linux Distro is Best for School: Void, Debian, or MX?

I'm trying to decide which Linux distribution is best for my school laptop. I've mainly used MX Linux, but I'm open to trying Void...

Is Linux Safe for My Laptop?

I'm thinking about trying Linux for the first time but I'm really nervous that it might mess up my laptop. Specifically, will it affect...

Looking for a WiFi Storage Solution for My Photos

I'm trying to find a storage device that I can use to store my photos without needing to plug it into my laptop all...

1 COMMENT

  1. Hello Dan, thanks for posting this, but I’m unsure how the wp javascripts get loaded. You say just call wp_enqueue_media() but that just queues them in php, but doesn’t send them to the browser, so wp.media() is not available in wpmediabrowser(). There seems to be something missing after wp_enqueue_media(). Please could you check your source code and advise what’s missing? Much appreciated.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Tools

Scavenger Hunt Team Randomizer

Planning a scavenger hunt and need to split participants into random teams? Whether you're organizing a school activity, a corporate team-building event, or a...

File Hash Generator Online – Get Instant MD5 and SHA-256 Hashes

Whether you are validating downloads, checking for corruption, or comparing files for duplicates, having a fast and secure way to generate file hashes is...

Visual CSS Editor for Modern Glass UI Effects

Modern UI design is all about clean, layered aesthetics, and few styles deliver this better than glassmorphism. If you're designing sleek user interfaces and...

Fast and Accurate Tap BPM Counter – Free Web Tool

Whether you're producing music, DJing live, or just figuring out the tempo of a song, knowing the BPM (beats per minute) can be critical....

Glassmorphism CSS Generator with Live Preview

Glassmorphism is one of the most visually striking design trends in modern UI. Its soft, frosted-glass effect adds depth and elegance to web interfaces,...

Add Custom Speech and Caption Boxes to Any Image Online

Creating comic-style images used to require complex design tools or specialist software. Whether you're making memes, teaching graphics, social media posts or lighthearted content,...

Latest Posts

Latest Questions