A couple of days ago, I started implementing a rather interesting piece of code. It was late into the night, and I was not feeling like doing my regular work and neither was I sleepy. At that time, I was reminded of another project where we needed to provide users the ability to browse and upload files while entering content through the WYSIWYG editor we would provide them.

Basically the project was an eLearning web portal and users needed the ability to enter content through a WYSIWYG editor, upload files through the editor itself, browse the files on the server and further select image/media files on the server to insert them inline into the Html content in the editor. In short, they needed a kind of Image, Media and File Manager to integrate and operate seamlessly from the WYSIWYG editor.

Although I have used many of them earlier, TinyMCE has been my WYSIWYG editor of choice lately. I quickly checked the plugins for the latest version of TinyMCE and it does not ship with such a File Manager natively. However I noticed 2 related commercial plugins from the TinyMCE creators themselves. After some thought, I decided to implement the plugin myself as I was not sure that the functionality I needed would be available exactly from the commercial plugins. I needed the plugin to work exactly like my specifications. So, I spent late Thursday night and bulk of today (Sunday) coding the plugin and I have been really pleased on how it has shaped up. So much so, that I decided to share the plugin with the community Cool

So, let’s now discuss somethings about the plugin itself. This plugin is based on ExtJs 4.x for TinyMCE 3.x.

We were using ExtJs 4 in UI for this eLearn Portal already. So, ExtJs was the natural choice when it came to using the Tree, Grid and other components that would be required for a FileManager/FileBrowser kind of a plugin. The major challenge was not so in coding the FileManager/Browser functionality with ExtJs but more with understanding how plugins work in TinyMCE (mind you, this was my first attempt at a TinyMCE plugin) and making ExtJs and TinyMCE integrate seamlessly.

ExtJs File Manager ButtonsThe first challenge was getting multiple buttons on the TinyMCE toolbar. It took me some time to figure out that you specify each button offered by a TinyMCE plugin independently in the theme_advanced_buttonsx configuration to the TinyMCE init method. This plugin adds 4 buttons (as you can see above in the screenshot), one for selecting images from the server to be inserted inline, second for selecting media files, third for uploading files and the last one is an info button for the plugin. Please note that the button for selecting Media files would be available only if the TinyMCE editor instance has the media plugin enabled for it, otherwise the button for selecting Media files would not show up on the toolbar. All the rest 3 buttons are always available irrespective of the plugins you have enabled for the TinyMCE editor instance.

I have used regular ExtJs window, TreePanel and GridPanel for the bulk of UI compromising the facilities for selecting files from the server and uploading them (as you can see in the screenshots below).

ExtJs File Manager UI  You can upload a file  4 files can be uploaded at a time

Having done this, the next important piece of the puzzle was how to get the user to enter the auxiliary information for the Images/Media files selected from the server (title, width, height etc). My initial instinct was to create custom UI for it in ExtJs. But then I thought there is no point re-inventing the wheel and it would be better to re-use the dialogs available from TinyMCE itself for the purpose.

The native Tiny MCE dialogs are shown for entering additional information on selected filesSo, after you select an Image file from the server, the ExtJs Browser plugin checks if the Advanced Image plugin is enabled for the editor instance. If its available, the Advanced Image popup is shown where the url to the image is already filled-in, you can see its Preview and add other information about the image. If Advanced Image plugin is not available, the basic Image pop-up is shown.

The ExtJsFileManager works with and without inline pop-ups for the TinyMCE Editor.

Similar thing happens for the Media selection button. You can browse and select the Media file from server and then the Media popup is shown to request further information about the selected Media file (this button as mentioned, is available only if Media plugin is enabled for the Tiny MCE editor instance).

So, that are some details on how this plugin for Tiny MCE works. Let’s now take a look at how to use this plugin. Following is a sample configuration to use this plugin:

 

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }tinyMCE.init({
// General options
mode: “exact”,
elements: “txt1”,
theme: “advanced”,
skin: “o2k7”,
plugins: “autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,extjsfilemanager”,

// Theme options
theme_advanced_buttons1: “save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect”,
theme_advanced_buttons2: “cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor”,
theme_advanced_buttons3: “tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen”,
theme_advanced_buttons4: “insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,|,extjsfilemanagerselectimage,extjsfilemanagerselectmedia,extjsfilemanagerupload,extjsfilemanagerinfo”,
theme_advanced_toolbar_location: “top”,
theme_advanced_toolbar_align: “left”,
theme_advanced_statusbar_location: “bottom”,
theme_advanced_resizing: true,

//ExtJs FileManager options
//Required – Server url handling the requests
extjsfilemanager_handlerurl: ‘BrowserHandler.ashx’,
//Optional – Any extra parameters you want to have passed to your server-side handler on each request from the FileManager.
extjsfilemanager_extraparams: { param1: ‘value1’, param2: ‘value2’ }
});{/syntaxhighlighter}

There are 2 configuration options for this plugin:

  1. The handler url which would be responsible for handling all calls for fetching files, directories etc. for this plugin (samples for both ASP.NET and PHP are attached below). This is a required option.
  2. Any additional parameters you want to be sent to the server on each request by this plugin. This is an optional configuration for the plugin.

A good thing about this plugin is it does not assume anything on what’s happening on the server-side. So, if you want different files or directories to be shown depending upon the user or his/her roles, you do it completely server-side and send the accessible files/folders to the browser which this plugin then presents to the user to select from.

Further you can control which buttons are shown to the current user. e.g. if you want the current user to be only able to browse files from the server but not upload files, simply omit the Upload button from the configuration (whose key is extjsfilemanagerupload). Then you will need to take care on the server to reject the upload request if an unauthorized user tries to act smart and craft a manual upload request to the server.

But again, all this is handled server-side and you can use this plugin as a stand-alone interface on client-side to allow user to browse, select and/or upload images and media files from the server. And you can easily restrict in your server code which files and directories a user has access and can browse/upload to.

You will find 3 files attached below:

  1. extjsfilemanager.zip – This is the raw plugin code for TinyMCE that you drop to your TinyMCE’s plugins folder.
  2. The second is a complete sample application in .NET. You just download and extract it and run it over IIS, it comes bundled with ExtJs 4 and TineMCE 3, so no additional downloads would be required.
  3. The third is a complete sample application in PHP. Again, you just download and extract it and run it over Apche (or IIS), and it also comes bundled with ExtJs 4 and TineMCE 3.

If I get time, I would try to further enhance this plugin to a FileManager beast, something like my Take Control module for Drupal (but no promises, and it depends upon if I get time to work further on this plugin). In the meantime, the plugin in its present form should already satisfy many of the use-cases and should be a good alternative to the commercial counterparts from TinyMCE authors (no prizes for guessing, this plugin is totally free).