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.

 

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.

 

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:

 

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.

4 Responses to “Integrate CKFinder with TinyMCE”

  1. telesex September 26, 2013 at 4:27 am # Reply

    At this moment I am going to do my breakfast, once having my breakfast
    coming yet again to read more news.

  2. clone July 4, 2013 at 7:23 am # Reply

    Source code is in the post, do you need some help with it?

  3. defrian April 5, 2013 at 12:22 am # Reply

    can i have source code??

  4. mantenimiento informatico malaga December 23, 2012 at 6:09 pm # Reply

    Hurrah, that’s what I was searching for, what a data! existing here at this website, thanks admin of this web site.

Leave a Reply