Update 17 november 2010: version 2.0 is out! Read the blog post here!
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!
#1 by Vince - March 18, 2010 at 3:30 PM
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
#3 by Paul Klinkenberg - March 19, 2010 at 9:13 AM
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
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
#6 by Mick - March 20, 2010 at 6:17 PM
#7 by Paul Klinkenberg - March 20, 2010 at 6:21 PM
#8 by Barbara ONeal - April 1, 2010 at 9:29 PM
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
"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 <cfset var returnData_struct = {"Error"=arguments.str, "Code"=-1} />.
If you want to use this in an earlier version, then just rewrite the <cfset> tags which contain this markup."
I guess you're using CF7 or 6?
#10 by Barbara ONeal - April 2, 2010 at 3:28 PM
#11 by Barbara ONeal - April 6, 2010 at 8:02 PM
#12 by Laurent Chenet - April 16, 2010 at 11:56 AM
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:
<cfset var returnData_struct = {"Error"=arguments.str, "Code"=-1} />
You may write:
<cfset "temp.Error" = arguments.str>
<cfset "temp.Code" = -1>
<cfset var returnData_struct = temp />
It will work. You just need to replace all of them.
But I prefered to add this function in filemanager-functions.cfm:
<cffunction name="jsonError">
<cfargument name="s" />
<cfargument name="e" />
<cfset "local.temp.Error" = s>
<cfset "local.temp.Code" = e>
<cfset local.returnData_struct = local.temp />
<cfreturn local.returnData_struct>
</cffunction>
I then can replace:
<cfset var returnData_struct = {"Error"=arguments.str, "Code"=-1} />
Whith this:
<cfset var returnData_struct = jsonError(arguments.str,-1) />
Paul: Thank you for you great work.
Regards,
Laurent
#13 by Laurent Chenet - April 16, 2010 at 12:25 PM
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
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
#16 by Paul Klinkenberg - April 25, 2010 at 4:48 AM
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
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
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
#20 by Aegis - April 28, 2010 at 4:02 AM
@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
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
#23 by Jerry - June 16, 2010 at 8:21 PM
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
#25 by Paul Klinkenberg - July 10, 2010 at 12:45 AM
Let me know if it worked for you :-)
#26 by Lee - July 12, 2010 at 3:24 PM
#27 by Barbara ONeal - July 12, 2010 at 8:02 PM
#28 by Paul Klinkenberg - July 12, 2010 at 11:51 PM
@Barbara, I got your mail, and replied already :-)
#29 by mario - July 14, 2010 at 4:28 PM
#30 by Paul Klinkenberg - July 27, 2010 at 11:55 PM
Using the firebug console: http://www.codeproject.com/Articles/38717/Debugging-Client-Side-JavaScript-Using-Firebugs-Console.aspx
Good luck, Paul
#31 by Philippe - October 7, 2010 at 10:51 PM
One works very fine, but on the other, when I click on a file, on the left, an error is displayed with this message "File /var/www/usr/local/bin:/usr/bin:/bin does not exist" (translated in french !...)
The main difference between my two servers is that this who works fine is installed with the Coldfusion internal server, and the other with Apache ... Is there the problem ?
What do you think about that ? Thanks in advance
(I apologize for my very bad english ....)
#32 by John - October 27, 2010 at 3:54 AM
Thanks!
#33 by Paul Klinkenberg - October 27, 2010 at 2:03 PM
I tried to reproduce the problem with the test setup located here: http://www.railodeveloper.com/ckeditor-coldfusion-filemanager/
but that just seemed to work. Hope to hear from you, kind regards, Paul
#34 by John - October 27, 2010 at 6:51 PM
Thanks again!
#35 by John - October 27, 2010 at 6:56 PM
I appear to be good on this issue!
#36 by John - October 27, 2010 at 7:00 PM
Thanks!
#37 by Tim - November 9, 2010 at 8:46 PM
Any assistance is greatly appreciated. Thanks in advance.
#38 by Paul Klinkenberg - November 9, 2010 at 9:27 PM
Hope it helps, Paul
#39 by Tim - November 10, 2010 at 3:06 AM
{"Error":"Mode error.","Code":"-1.0"}
#40 by Tim - November 10, 2010 at 3:42 AM
I simply modified (hard coded) the directory path in Application.cfm and filemanager.config.cfm to:
<cfset variables.jqueryFileTree_webroot = '/site_builder/site_dirs/mySite/' />
<cfset request.uploadWebRoot = '/site_builder/site_dirs/mySite/' /><!--- this path must start with a "/", so it is always calculated from your website's root. --->
root path is localhost/site_builder/ckeditor.
Just not sure how files continue getting to localhost/uploads/. I cleared browser cache, every cache setting in cf9 admin, rebooted, restarted CF services....
Any thoughts?
#41 by Paul Klinkenberg - November 10, 2010 at 10:55 AM
At the moment I have no idea how it comes the thing still uses the wrong path.
Do you maybe have the setting "Trusted cache" set to Yes in the CF9 admin (in page "Server Settings > Caching")? So it never checks for newer versions?
Or on the same page, "Save class files" set to Yes?
These are just some shots in the dark, but hope it helps ;-)
#42 by Tim - November 10, 2010 at 2:23 PM
#43 by Paul Klinkenberg - November 10, 2010 at 3:33 PM
#44 by Tim - November 11, 2010 at 7:02 PM
The attachment document1.pdf displays a couple of "concerns". (attachment in email reply)
Notice the inconsistency with the Current Folder display. While clicking around in the filemanager, the current directory changes from "/image/" to "fullpath/image/file"... I feel it would be most beneficial to display a consistent directory path regardless which side of the splitter is used .
Also attempted using the config.baseHref in ckeditor config file, but this caused errors. It would be wonderful to return all files from filemanager with a prefix "http://mysite.com/path/fileFromFilemanager";. This would avoid issues with pages on a different directory level.
Also, it seems that the filemanager buttons fall off the page with a long Current Folder path (actually the buttons wrap just below only showing the very top of the buttons). Same result in multiple browsers.
I tried messing around with the css and js, but to no avail. Any thoughts?
Thanks a ton - Tim
#45 by Paul Klinkenberg - November 17, 2010 at 9:38 PM
http://www.railodeveloper.com/post.cfm/ckeditor-3-with-coldfusion-filemanager-version-2-0-for-free
#46 by Great Dental Websites - December 1, 2010 at 2:00 AM
Have you played with some of the more advanced features of CKeditor, like pulling the char count of the WYSIWYG boxes and stuff? We're doing that in FCKeditor after some hackery, hopefully its easier in the new version.
Nice work on this.
#47 by Paul Klinkenberg - December 1, 2010 at 10:49 PM
#48 by Dave White - December 11, 2010 at 11:20 AM
Thanks for this, I can upload images to server to the paths I specified without a problem.
But, when I click the Browse Server Button (to get images previously uploaded), I get the spinning LOADING image and the following error :-
{"Error":"The directory C:\\Program Files (x86)\\Apache Software Foundation\\Apache2.2\\htdocs\\ecmsContent\\C:\\ColdFusion9\\verity\\k2\\_nti40\\bin;C:\\Windows\\system32;C:\\Windows;C:\\Windows\\System32\\Wbem;C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\;C:\\Program Files\\MySQL\\MySQL Server 5.1\\bin;C:\\Program Files (x86)\\GnuWin32\\bin;C:\\Program Files\\7-zip;C:\\Program Files (x86)\\Common Files\\Autodesk Shared\\; does not exist.","Code":-1.0}
The first portion of the error namley :-
C:\\Program Files (x86)\\Apache Software Foundation\\Apache2.2\\htdocs\\ecmsContent\\
is where i want to browse but as to the rest of the directories in the error, I haven't a clue.
Any idea's on this one ;-)
#49 by Dave White - December 11, 2010 at 4:27 PM
Well, the PATH being used is the PATH ENVIRONMENT VARIABLE used by windows.
( This is probably a CFADMIN setting, I guess).
Anyway I got round this by editing filemanager.cfm and changed the following lines
BEFORE
<cfset application.filemanager_obj.addFolder(path=path, dirname=name) />
<cfinvokeargument name="path" value="#path#" />
AFTER
<cfset application.filemanager_obj.addFolder(path=url.path, dirname=name) />
<cfinvokeargument name="path" value="#url.path#" />
So now the url.path var is referenced instead of the WINDOWS PATH.
This fixes the problem and I can now Browse,Upload and Add Directories.
Still can't get the image to appear after clicking on a file in the Left Pane.
I just get the SELECT, DOWNLOAD, RENAME and DELETE buttons, but no image.
Firebug reports the Path and Preview vars as
Path":"\/ecmsContent\/image1.jpg"
:-(
#50 by Dave White - December 12, 2010 at 4:53 PM
Got it working completely.
The answer was very simple. TURN OFF CF DEBUGGING.
I reckon aJax sees the debug info as part of the GET response.
Great utilty this, thanks for writing it.
#51 by Eric Do - June 28, 2011 at 7:34 PM
Can you please tell me on how to make the URL / Path to Image label display?
Thank you in avdvance.
#52 by Eric Do - June 28, 2011 at 7:52 PM
I just download the 'image.js' file from your demo site as well as the 'en.js' file in the lang directory and updated on my server. The undefined values are showing up now.
Appreciate for making this tool available to the CF community.
Eric
#53 by Paul Wilson - July 1, 2011 at 12:02 AM
There was an interesting post from Jerry (#23 on June 16 2010) about replacing createObject calls to use cfinvoke. I'm also hosting on a sandboxed | shared host and get the same issue, so would love to know what calls need to be changed, ie. where they are and how to replace them. Thanks.
#54 by sachin - September 13, 2011 at 2:07 PM
#55 by Ron Sellers - September 21, 2011 at 3:47 PM
I changed: $(function(){ to $(window).load(function(){
#56 by Tim - September 21, 2011 at 3:58 PM
I am using a slightly modified version for the filemanager; however have not implemented the suggested fix.
#57 by Colin - August 22, 2012 at 4:15 PM