Integrate CKFinder with TinyMCE

I know TinyMCE isn’t very popular lately, since it’s not free any more, but I was asked by a client to fix the file uploading with TinyMCE in their CMS. It uses the last free version of TinyMCE – 1.41, and used to have TinyBrowser integrated for file browsing. As the TinyBrowser stopped working and support is equal to nothing, I decided to integrate CKFinder instead.

It wasn’t an easy task, but bit by bit i somehow managed it. What’s even worse, their CMS didn’t use any frameworks, so I decided to keep it that way, and wrote pure javascript. The script isn’t very nice, but it works.

OK, let’s get to the coding part. After importing the needed .js files first thing that needed to be done is defining the custom function in TinyMCE initialization that will be called when the Browse button is pressed.

<script type="text/javascript">
tinyMCE.init({ language : "sr", mode : "textareas", theme : "advanced", plugins : "safari,spellchecker,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", theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,|,forecolor,backcolor,|,code,fullscreen", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_buttons4 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", relative_urls : false, file_browser_callback : 'myFileBrowser', external_link_list_url : "/js/myexternallist.js" });
</script>

Here it’s named myFileBrowser (file_browser_callback : ‘myFileBrowser’). Nothing much to say about that, so let’s skip to myFileBrowser function, which launches the CKBrowser itself.

<script type="text/javascript">
function myFileBrowser (field_name, url, type, win) {
// You can use the "CKFinder" class to render CKFinder in a page:
var finder = new CKFinder();
// The path for the installation of CKFinder (default = "/ckfinder/").
finder.basePath = '/js/ckfinder/';
// Name of a function which is called when a file is selected in
CKFinder.finder.selectActionFunction = SetFileField;
// Additional data to be passed to the selectActionFunction in a second argument.
// We'll use this feature to pass the Id of a field that will be updated.
finder.selectActionData = field_name;
// Launch CKFinder
finder.popup();
}
</script>

I left the comments from the example I found for using CKBrowser with a textfield. So, basicaly we just init the finder and set what function will be called when the file is selected. SetFileField is the function that is left to be created, and file_name will be contained in the data array passed to the function. Let’s get onto it:

<script type="text/javascript">
function SetFileField( fileUrl, data ){
var frId = getElementsByClassName("clearlooks2", "div")[0].getElementsByTagName("iframe")[0].id;
document.getElementById(frId).contentWindow.document.getElementById(data["selectActionData"]).value = fileUrl;
}
</script>

This part was a bit tricky, since TinyMCE opens iFrames in modal dialogs I couldn’t just access the text field by it’s id, but had to access it via iFrames id. To do that, as the frames id is generated again with each modal opening, I had to find the current assigned id. I used a bit of trick there, by accessing the overlay div by class, as it is always static (clearlooks2), and then getting element by tag name “iframe”. Once I had that prepared, I was able to get the field by id and populate it’s contents. In my case, as there was no framework support, I used Robert’s Ultimate getElementsByClassName to get the element by class.

I don’t know if this will be useful to someone, as TinyMCE is disappearing from the scene, but if anyone get’s in a similar situation, I’m sure this will help.