Someone asked me today if you could use the Coldfusion filemanager plugin for CKeditor as a standalone application. That's a great idea, I thought. It can replace the regular file upload fields.
You can view a working example here.
Download
- You still need to download the CKeditor with the filemanager, but you only need the directory "filemanager" and the files "jquery-1.3.2.min.js" and "standalone.html"
The source for the implementation is the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Coldfusion filemanager standalone - demo</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var fileeditorwin = null;
var destField = null;
function startfilemanager(destinationFieldID)
{
// open window?
if (!fileeditorwin || fileeditorwin.closed)
fileeditorwin = window.open('filemanager/index.html?type=File¤tFolder=/', 'fileeditorwin', 'width=800,height=500,resizable=true');
// focus window (handy if it blurred)
fileeditorwin.focus();
// remember the field ID where to store the path
destField = destinationFieldID;
}
function SetUrl(path, width, height)
{
$('#'+destField).val(path);
$('#imgwidth').val( (width||'') );
$('#imgheight').val( (height||'') );
}
</script>
</head>
<body>
<input type="text" name="filepath" id="filepath" size="100" style="width:500px;" value="" />
<input type="button" value="Upload/choose file" onclick="startfilemanager('filepath')" />
<br />
width: <input id="imgwidth" size="5" />
height: <input id="imgheight" size="5" /> (if chosen file is an image)
</body>
</html>
#1 by Tim - December 4, 2010 at 8:30 PM
#2 by kristof polleunis - February 6, 2011 at 12:33 AM
#3 by Paul Klinkenberg - February 6, 2011 at 1:18 PM
#4 by Mike - March 1, 2011 at 10:15 AM
First off thanks for this. It looks great. I have been trying to install it as a stand alone with a newer version of CKeditor. I have it so that the browser server button works and the window loads. I can see the folder/files on the left in the tree but the corresponding files on the right don't load. I just see the spinning icon and never loads the files. Any thoughts?
Mike
#5 by Paul Klinkenberg - March 1, 2011 at 10:50 AM
Also, see the install instructions for the filemanager itself, at http://www.railodeveloper.com/post.cfm/ckeditor-3-with-coldfusion-filemanager-version-2-0-for-free
Good luck, Paul
#6 by Mike - March 1, 2011 at 6:11 PM
Thanks for the reply. This is what I'm getting in Firefox.
GET http://bbqto:90/BBQ/maint/filemanager/connectors...anager.cfm?path=/&mode=getfolder&showThumbs=true
GET http://bbqto:90/BBQ/maint/filemanager/connectors/cfm/filemanager.cfm?path=/&mode=getfolder&showThumbs=true
500 Cannot declare local variable CFCATCH twice
Any thoughts?
#7 by Mike - March 1, 2011 at 9:54 PM
Further investigation is showing this.
Cannot declare local variable CFCATCH twice.
Local variables cannot have the same names as parameters or other local variables.
The error occurred in filemanager\connectors\cfm\Application.cfm: line 19
17 : <!--- initialize the filemanager object if not yet existent --->
18 : <cfif not structKeyExists(application, "filemanager_obj") or structKeyExists(url, "init")>
19 : <cfset application.filemanager_obj = createObject('component', 'filemanager-functions') />
20 : <cfif structKeyExists(url, "init")>
21 : <h1>Filemanager cache has been flushed!</h1>
#8 by Mike - March 6, 2011 at 5:01 PM
I hope you enjoyed Scotch on the rocks. I've been trying long and hard to solve my issue. Did a clean install. Initially I have my initial problem of folders/files loading on left side fine but files on right I just get spinning icon. In application.log it says.
Cannot declare local variable CFCATCH twice.Local variables cannot have the same names as parameters or other local variables. The specific sequence of files included or processed is: Removedby me\filemanager\connectors\cfm\filemanager.cfm''
I had figured out the other day that if i comment out the addfile function in filemanger-function.cfc line 303 refreshed the paged this corrected the issue. Then uncomment and its working on the right side. Which brings me to a new issue Adding a file doesn't work.
Application.log says
The method addFile was not found in component Removedby me\filemanager\connectors\cfm\filemanager-functions.cfc.Ensure that the method is defined, and that it is spelled correctly. The specific sequence of files included or processed is: Removedby me\filemanager\connectors\cfm\filemanager.cfm, line: 29
Firebug is also showing a Syntax error on line 691 in filemanager.js
var data = eval('(' + $('#uploadresponse').find('textarea').text() + ')');
I really would like to get this working. Seems really nice.
#9 by Paul Klinkenberg - March 7, 2011 at 4:24 PM
[cfset var cfcatch = "" /]
what version of Coldfusion are you using btw?
#10 by Mike - March 7, 2011 at 4:39 PM
Hi Paul, Ok i removed the only instance of it. Restarted the server and the first error is gone CFCatch but I'm still getting addfile was not found. And the JQuery stytax error. I'm on CF9.01
#11 by Mike - March 8, 2011 at 3:16 PM
Ok I got it to work perfectly by removing the Application.cfm stuff to a higher level Application.cfc. So It's perfect now. Thank for the great tool.
#12 by Fernando - April 1, 2011 at 10:58 AM
I`ve tried it in both CF8 and CF9 versions and only works in CF9.
In CF8 i can see the tree, and even i can create a folder and upload an image, but when i click on it, i only obtain the spin wheel in the right side.
Thank U!!
#13 by Paul Klinkenberg - April 1, 2011 at 12:21 PM
Also, see the debugging tips on that page, so YOU can find out what is not working, and report that.
Cheers, Paul
#14 by Fernando - April 1, 2011 at 1:01 PM