TinyMCE File Manager

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.

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.

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

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.

There are lots of ways to validate a link click. If you are programming a website that will be used by a large number of clients, then you will need to use a more secure method of validating user clicks. This is a very simple way of implementing this. If you are looking to prevent accidental deletion of important content, then you should really redirect to a confirm page before continuing to complete the delete.

I like to use this method of confirmation as a quick validation for clicking links that aren’t of major importance. Rather than the effort of using advanced validation It is nice to use this to protect. If it doesn’t work, its not a big deal as i can click the button again to undo it, but it never hurts.

You can implement this using a single method in the onclick handle of any clickable link in html.

So you have hit the issue where you have a responsive website and everything looks great, but then you notice that embeded videos do not correctly fit within your responsive design. Fear not this can be quickly fixed by adding a div around all of your embeded videos and a little bit of css to go along with it. If you are using something like TinyMCE to do this, then it might seem like a lot of work to have to manually add a div to all of the embed videos that you add. Well fear not it’s possible to do this automatically!

Start by going to the plugins folder of your TinyMCE install directory. I am using TinyMCE 4 so the plugin file contents may differ if you are using an older version. Either way the concept will remain the same. Search through the file and look for he following string. “Paste your embed code below”. This may differ for each version, the best way to test is to use TinyMCE and see what message pops up when you are adding the embed code. Using minified code makes this quite hard to find, but it’s possible.

You will see an onclick method just past this. This is the function that you need to modify. Inside of this function you will see the following code

Replace this line of code with the following.

If you save the file and test this you will see that the iframe is now being added with the div wrapped around of it. (you might need to have the tools that allow you to view the source code to check this). From now on any embeded iframe from youtube or any other video website, will have a div wrapped around it. This allows you to add some custom css that will make the video responsive.

Open up your css file and add the following code.

Save this and check your website again, any videos that have the “videoiframe” div wrapped around it will be responsive. This of course wont effect existing videos that were added before you made this change to TinyMCE, but at least now you can go back and edit the posts to add the div to all of the embeded videos and they will now be responsive without having to do any work modifying the source code.

Drag and drop is cool, but for me i found that it was causing more trouble than good. So if you are like me and are sick of accidentally dropping a folder into another sub directory, then it’s best to just disable it completely. Unfortunately this cannot be done directly using the init settings (at least as far as i know it cant), but not to worry, it’s very easy to disable it anyway.

To disable drag and drop, you will need to open up “elfinder.js”. For me this file was minified which made it a little difficult to work with, but you don’t need to do much so don’t worry. Do a search of the file and look for the following. Make not that this is the minified code, so if it returns null, try mess around with it a bit and you will find it.

In my case i just deleted the droppable functionality. This meant the drag still worked, but it didn’t do anything. You can disable both if you like but for me droppable was enough as I got weird icon issues sometimes when draggable was disabled.

Search through the file and look for following code and just delete the contents of the droppable value.

 

To delete the draggable functionality you will also need to edit the elfinder.js file. Look for a line of code like the following

All you need to do is remove the text from the variable.

Drag and drop is now disabled for elfinder.

javascript

If you have a file upload in a form it is helpful to limit what formats you want to allow users to upload. This tutorial will show you how to do this using javascript. Please note that client side validation is useful, but can be easily bypassed. For safest results use both client and server side validation.

For this example we will create a function called checkExtension(). This function will check the extension of the file to ensure that it is a format that you want to allow. If it is an allowed format it will do nothing and if it isn’t it will alert the user then clear the file upload input. The allowedExtensions variable is where you will put a list of the extensions that you want to allow.

This is all that is required from javascript to enable the validation. All you need to do is create the html form and add the onchange event handler to make it call this function.

Remember to also include server side validation to ensure you are fully protected.

elFinder is a great file manager to use to manage files on your web servers hard drive. It can be configured to work with TinyMCE or called on it’s own which is what I am going to demonstrate here. When browsing files I wanted to be able to select a file and then to get the URL of that file passed back to the main form.

elfinder

The default instance of elFinder doesn’t return the selected file to the previous window which is a bit of a pain, but thankfully it’s not all that hard to get it working. For this instance I was creating a form that would create an image gallery. Images were selected from the hard drive and then once submitted the selected images would become a gallery. So I needed to use elFinder as a file manager to browse the disk and allow me to upload new images.

The following HTML is setup to trigger the elFinder window and display any images that are selected. There is a hidden input field that will store the selected images you you can send them through in a form. The selected images will then be displayed in the “selectedImages” div after selecting them.

The javascript below is set to wait for a click of the href. Once clicked it will display the window. The url will need to be changed if you have “connector.php” moved to a different location. I found height and width useful to, but they are optional. Place any code you like inside “getFileCallback”. You can use jQuery to put the “file” value anywhere you like on your page.

I found I had to update some of the CSS for the elFinder window as the buttons were showing up strange. I was able to add the CSS to the page that was calling the file manager so there was no issues fixing this.