CKeditor 3 with free filemanager, now also for Coldfusion! v1.1.2

Posted by Paul Klinkenberg in CFML , jQuery + Javascript on March 5, 2010

I always used version 2 of the best wysiwyg editor out there: FCKeditor. But it began to show it's age, and some functions didn't work like I wanted. So I checked for an upgrade.

And yes, did they have one! A completely rewritten editor, now dubbed CKeditor, created by CKsource.com. It looks good, works good, and was easy to integrate.
On the other hand, they really changed the way they do business: if you want the file uploader CKfinder with the editor, you have to pay for it! Previously, all was free. I understand they want to make money, but to pay a license fee per client website would be unreal.
Luckily, there is a free alternative: the CKeditor filemanager plug-in by Core Five

They made a file manager (uploader) plugin which can be used with CKeditor, and is very easy to implement. But as always, Coldfusion wasn't yet supported. And that's why I created the CFM connector for CKeditor's alternative Filemanager!

Changes I made

Added the /connectors/cfm/* files
Changed /scripts/filemanager.js on a few points:
- the deleted file is now removed from the UI when a file is deleted
- A javascript error was thrown after a file was uploaded (possibly because the JSOn I send back is different)
Removed all connector files from /scripts/jquery.filetree/connectors, except:
Renamed /scripts/jquery.filetree/connectors/jqueryFileTree.cf to jqueryFileTree.cfm, and added extra security to the script (and is now disabled by default)
Changed some settings in CKeditor: added MediaEmbed plugin (the "youtube button"), and changed the menu order and items. If you don't like it, then just delete it from the file config.js.

Versions

Version 1.1.2, 11 august 2010: fixed a bug with expandPath('/') in ACF8 on some windows systems. This bug was a blocker, because the language file could not be read.

Version 1.1.1, 10 july 2010: fixed a bug with calculation of the webpath for files. Some users had image urls like "C:\site\blabla".

Version 1.1, 25 april 2010: replaced some non-CF8-compatible code (<cfset x = {"error":0} />). Updated CKeditor to 3.2. Did some bugfixes within the filemanager code. Added new optional list of website page urls into the Link dialog, thanks to Erik-Jan Jaquet's idea.

Download and code

Download the complete CKeditor with Coldfusion filemanager
Browse all the files within subversion

Demo

With the risk of being completely spammed, I created a demo environment. It has some restrictions: images only, and all files are deleted within an hour.

Questions? Problems? Using it?

Let me know by adding a comment underneath!

| Viewed 1752 times

#1 by Vince - March 18, 2010 at 3:30 PM

Hi I try to develop a plugin for Symfony 1.4 which integrate the last CKEditor with your file manager. Excellent job you done ! Thanks I merged it with the lastest version of CKEditor, it seems to work but I have a problem on folders location. I want them to be in /uploads/Image/ and /uploads/Flash/ folders of my website, but its tells me : CFM developer: see #rereplace(getCurrentTemplatePath(), "([/\\])", "\1 ", "all")# for security instructions! Did I missed an option ? Thanks

#2 by Wout - March 18, 2010 at 11:34 PM

I don't think you missed an option, you just need to talk to you web hosting company: it seems they aren't allowing you to use the full functionality of CF - mainly for security reasons.

#3 by Paul Klinkenberg - March 19, 2010 at 9:13 AM

Hi Vince, as a security measure I disabled the use of /scripts/jquery.filetree/connectors/jqueryFileTree.cfm by default. That's where the error is coming from I believe. I really need to add an extra bit of instructions with this project... Let me know if you run into any other trouble!

#4 by Vince - March 19, 2010 at 9:38 AM

Hi, I try it in local, so there is no specific security lock. Where can I enable the use of jqueryFileTree.cfm ? In which file : filemanager.config.cfm ? Thanks for your help

#5 by Paul Klinkenberg - March 19, 2010 at 11:27 PM

Vince, just open the file /scripts/jquery.filetree/connectors/jqueryFileTree.cfm within the ckeditor you downloaded from my site, and read the first lines. It tells you what to do...

#6 by Mick - March 20, 2010 at 6:17 PM

It works on my localhost (krasnal) but on my website i dont see enything. The ckeditor doesnt open. Why?

#7 by Paul Klinkenberg - March 20, 2010 at 6:21 PM

Can you give us a link?

#8 by Barbara ONeal - April 1, 2010 at 9:29 PM

Hello Paul, I downloaded and started working with the Editor and file manager but am getting a coldfusion error when using on a site that i am working with. I can see the files and folders in the directory structure however, i can't select and image and when i look at any of the dirctories all i get is the swirling icon. Here is he error i get back from coldfusion. The error occurred on http://www1.mywebsite.com/cw2/admin/ckeditor/filemanager/connectors/cfm/filemanager.cfm Users Browser: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.2) Gecko/20100316 Firefox/3.6.2 GTBDFff GTB7.0 Error Date/Time: {ts '2010-04-01 13:58:49'} Previous Page: https://www1.mywebsite.com/cw2/admin/ckeditor/filemanager/index.html?type=Images¤tFolder=/assets/&CKEditor=product_Description&CKEditorFuncNum=2&langCode=en IP Address: 74.94.102.1 URL Parameters: mode=getinfo&path=/assets/5reasons.gif Message: Invalid CFML construct found on line 44 at column 48. Root Cause: coldfusion.compiler.ParseException: Invalid CFML construct found on line 44 at column 48. -------------------------------------- Invalid CFML construct found on line 44 at column 48. ColdFusion was looking at the following text: { The CFML compiler was processing: • A cfset tag beginning on line 44, column 18. • A cfset tag beginning on line 44, column 18. The error occurred on line 17. I have tried debugging this but i keep getting stuck.

#9 by Paul Klinkenberg - April 2, 2010 at 10:10 AM

Hi Barbara, that's an error I hear a lot lately. I have now added the following text to this blog post: "Attention! For now, this code only works on Coldfusion 8, Coldfusion 9, and off course Railo. That's because I am lazy, and write structs like . If you want to use this in an earlier version, then just rewrite the tags which contain this markup." I guess you're using CF7 or 6?

#10 by Barbara ONeal - April 2, 2010 at 3:28 PM

Guess again, I own my hosting company i am on CF8 Enterprise with multiple instances. I also use sandboxing if that has anything to do with it. so since i am not using an earlier version do you have a different idea. i could go through and maybe try to rewrite the cfset tags but if you have a different ideal let me know.

#11 by Barbara ONeal - April 6, 2010 at 8:02 PM

Paul, can you think of any reason why it wouldn't work in CF8? also when you say rewrite the cfset can you give an example? I am sure others would appreciate as well. thanks.

#12 by Laurent Chenet - April 16, 2010 at 11:56 AM

Barbara, Paul showed me a very short way to write structures "on the fly", but somehow (too bad!), it is not working with all coldfusion servers, so: Instead of this: You may write: It will work. You just need to replace all of them. But I prefered to add this function in filemanager-functions.cfm: I then can replace: Whith this: Paul: Thank you for you great work. Regards, Laurent

#13 by Laurent Chenet - April 16, 2010 at 12:25 PM

Well, I rewrote all the cfsets (If you wanna get a copy, Paul, just ask!) But now I still get a javascript error when I click on a folder: props is undefined var actualWidth = props['Width']; i've put your ckeditor in an application who is a virtual folder for my websites. I don't know if it is where it hangs... It sees the files and folders anyway but when it lists the pictures in the tree and when I click one of them I get another javascript error: "undefined" and no picture is shown in the main pane.

#14 by Aegis - April 19, 2010 at 8:27 AM

Excellent work, Paul! just wondering if this filemanager uses the enforced directory structure like the fckeditor filemanager foisted on us or if you can use your own setup (like CFFM where having images in with normal docos didn't break fckeditor's image function - it just wouldnt send back the file if it wasnt an image). Cheers, aegis

#15 by Paul Klinkenberg - April 19, 2010 at 11:43 AM

Hi aegis, you can use your own directory setup. it filters on extension while uploading (see http://www.coldfusiondeveloper.nl/svn.cfm?repositorypath=ckeditor-coldfusion-filemanager/filemanager/connectors/cfm/filemanager.config.cfm:20), and in the config file for ckeditor (http://www.coldfusiondeveloper.nl/svn.cfm?repositorypath=ckeditor-coldfusion-filemanager/config.js:20) you can set the relative paths for images/files/media.

#16 by Paul Klinkenberg - April 25, 2010 at 4:48 AM

Hi all, I just released version 1.1 of the "ckeditor with coldfusion-filemanager". I think it addresses all the problems which were mentioned here. You can use the download link in the blog post to get the newest version. If there's anything wrong, let me know!

#17 by Barbara ONeal - April 25, 2010 at 8:02 PM

Paul, i downloaded and installed it on a site but am getting this error: CKEDITOR product_Description CKEDITORFUNCNUM 2 CURRENTFOLDER / LANGCODE en MODE add TYPE Images struct Detail Allowed values are ONE, ALL. Message The scope argument of the REReplace function has an invalid value all. however, when i look at the code in the \ckeditor\filemanager\connectors\cfm\filemanager-functions.cfc:373) at line 373 you do have a value of all. I tried to post more but it thought is was spam. if you would like i can email you more.

#18 by Paul Klinkenberg - April 25, 2010 at 11:21 PM

Hi Barbara, you probably overlooked the space before the word " all", just like I did... I fixed it. New version can be downloaded, and don't forget to flush the cached cfc by calling YOURSITE.COM/ckeditor/filemanager/connectors/cfm/filemanager.cfm?init=1

#19 by Dante - April 27, 2010 at 10:46 PM

I am having a problem with this application.. when I use it I can get the file manager popup to appear, but it never loads any files. It just sits at the loading icon, and never does anything else. I don't get any errors back when I try to upload, but it doesn't actually upload the files either.

#20 by Aegis - April 28, 2010 at 4:02 AM

thanks for the reply Paul. @Dante, you probably have an xml error - easiest way to check is to install firebug on FireFox if you haven't already - go into the XHR tab on firebug once you've opened the filemanager and check the response content.

#21 by Aegis - April 28, 2010 at 9:28 AM

Paul, is there a way to define the folder the filemanager will reference as the initial directory on a request by request basis? i just tried replacing a heavily customised version of CFFM in an emailer application and it locks users into a specific directory for each email they create but i can't see how to replicate that here if it's possible.

#22 by Paul Klinkenberg - May 8, 2010 at 11:42 PM

Hi Aegis, yes, it can be done. If you save the correct path into session, change the application.cfm files to use that path, and make sure that the config and cfc file are not cached anymore. Then, you should be fine. Even though I think the file uploader is a bit much to be used in an email application UI, but that's your choice off course :-)

#23 by Jerry - June 16, 2010 at 8:21 PM

This is a great upload application. I have been trying to get it to work on a server that does not allow createObject to be used, for some security reasons. I ended up changing calls to use cfinvoke, which seemed to solve the problem. I still can't seem to get it to work to upload or view files tho. I am always getting back the following error when I click on an image that I physically uploaded to the /uploads/Image directory Directory /magma/users/u74/vws30673/public_html/uploads\/usr\/bin: does not exist I have no idea where it is getting the "/usr/bin:" part that it seems to append to all the pathing... ???

#24 by Lee - July 8, 2010 at 3:12 PM

I seem to be really struggling to get this working properly and wondered it you could help? I uploaded your code and tried it out but just got the "processing" graphic. After I manually created the 'upload', 'upload/Image' folders I was able to upload an image. The image uploads OK but I can't see a thumbnail and I can't see the larger image. I have to click on it's name to be able to select it but it doesn't appear in the preview window - just a broken image icon. Also, the URL for the image shows up as 'C:/wwwroot.....' rather than just 'uploads/images' like on your demo. Is there something else I need to change?

#25 by Paul Klinkenberg - July 10, 2010 at 12:45 AM

Hi Le, Jerry, I now have a new version availabe, to hopefully fix the problem you were having with full paths instead of web urls. Check out version 1.1.1 at http://www.coldfusiondeveloper.nl/svn.cfm?repositorypath=ckeditor-coldfusion-filemanager/ckeditor-with-coldfusion-filemanager-v1.1.1.zip:100&download=1 Let me know if it worked for you :-)

#26 by Lee - July 12, 2010 at 3:24 PM

Hi, this works perfectly for me now. Fantastic - thank you very much!!

#27 by Barbara ONeal - July 12, 2010 at 8:02 PM

Paul, I sent you an email with some screen shots and configuration thing in it. I hope you get it. I am still having an issue with the thumbnails showing up.

#28 by Paul Klinkenberg - July 12, 2010 at 11:51 PM

Hi Lee, that's good to hear! Have fun with the editor! @Barbara, I got your mail, and replied already :-)

#29 by mario - July 14, 2010 at 4:28 PM

hi there. i have installed the latest version and when i go to "browse server" on the image properties under the "image info" tab the Filemanager tries to load but doesnt work. Uploading to the server works fine. Its just the browsing. I have edited the Config.js and Filemanager.config.cfm files.. is there anything i have missed?

#30 by Paul Klinkenberg - July 27, 2010 at 11:55 PM

Hi Mario, do you have firebug installed on Firefox? If so, you can check the ajax output in the console. There, you will probably find an error of some sort. If you find an error there, you can post it or mail it, and then we can see what can be done. Using the firebug console: http://www.codeproject.com/Articles/38717/Debugging-Client-Side-JavaScript-Using-Firebugs-Console.aspx Good luck, Paul

Railo Developer