How to implement a custom file manager in TinyMCE 4

The TinyMCE 4 javascript editor has been released in beta three days ago, with html5 support, a new interface and a complete rewrite of all plugins. TinyMCE is the standard WYSIWYG editor for online CMS and websites: if you have a custom file manager attached to the image button, it’s time to think about updating its loading code. To do this in minutes, you can add a quick hack to the new image plugin. Of course, this tutorial covers a standard approach not related to any File Manager in particular. Your final working code will be strictly related to the File Manager in use.

Step 1: get the plugin file

Start by downloading TinyMCE standard package and put it in your development environment. Every javascript file is now minified, so you have do download the TinyMCE development package and copy only the “js/tinymce/plugins/image/plugin.js” file in the corresponding folder of the standard package. Create a safe copy of the original “plugin.min.js” file and rename the new one to “plugin.min.js”, so that TinyMCE would load the uncompressed file instead of the minified one.

Step 2: create the File manager button

To add the “File Manager” button, editing the “js/tinymce/plugins/image/plugin.js” file, adding this line:

to the plugin element block (around line 87), after the opening code:

You can test it loading the TinyMCE editor in a sample page; the Image popup with the new “File Manager” button should look like this: tinymce_4_file_manager Now, add a custom function to open the file mananger, like this:

You can add it just before the “win = editor.windowManager.open … ” block around line 87.

Step 3: create a callback in your File Manager

Now switch to your File Manager. Every one is different, but there should be an event or javascript function loaded when the user selects the image to put inside the editor. Once you locate that function, all you have to do is to get the selected image url and put it in the “source” field of the TinyMCE Image popup, whose ID is given by the “tag_name” you passed before as a GET parameter, plus a fixed “-inp” suffix. Then, you can close the File Manager. Using JavaScript, given the TAG_NAME and IMAGE_URL parameters, you can do it like this:

TinyMCE 4 is a good development platform. Happy customizing!

11 thoughts on “How to implement a custom file manager in TinyMCE 4

  1. lordrt

    hi, can you upload or send me a full example of this implementation, with the files created for the codes etc?

    Reply
  2. Giovanni

    Hi, thank you very much for your post, you’ve saved me a lot of time.

    I would like to give my contribution.
    Implementing your method and looking at the roxyfileman implementation I’ve found this configuration parameter:

    http://www.tinymce.com/wiki.php/Configuration:file_browser_callback

    If you specify your function, the button for browsing files is added using the tinymce style, it’s more elegant and you don’t have to modify the image plugin source.

    Hope this is useful for others đŸ™‚

    Reply
  3. Speedt_ouch

    Thanks you very very much for sharing this. :)))
    So happy I found it!!

    Thumbs up for Giovanni also

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *