klog

var input=document.createElement('input');
input.id="image";
input.style.width='400px';
var f=function(){
	window.SetUrl=function(value){
		document.getElementById('image').value=value;
	}
	var filemanager='/demos/FCKeditor/editor/filemanager/browser/default/browser.html';
	var connector='connectors/php/connector.php';
	window.open(filemanager+'?Connector='+connector+'&Type=Image','fileupload','modal,width=600,height=400');
}
input.onclick=f;
document.body.appendChild(input);

8 Responses to “using FCKeditor’s file manager for your own CMS”

1. Christof Donat says:
   April 12th, 2006 at 1:55 pm

   Hi,

   I did it the other way round. I made a FCK-plugin for handling the file-upload using our existing file-management. Actually we didn’t realy like the FCK file-dialog - neither the image dialog.

   Nice to hear it also would have worked to use the FCK file-dialog.

   Christof

2. Paul says:
   June 15th, 2006 at 10:03 pm

   That is very nice,
   I integrate FCK into the page by replacing a regular using:

   window.onload = function()
   {
   var oFCKeditor = new FCKeditor( ‘formBody’ ) ;
   oFCKeditor.BasePath = “FCKeditor/” ;
   oFCKeditor.ToolbarSet = ‘CMS’;
   oFCKeditor.Height = 512;
   oFCKeditor.ReplaceTextarea() ;
   }

   Is there any way to do the same thing with input tags so the file manager textbox is in a form?

3. Kae Verens says:
   June 16th, 2006 at 9:53 am

   yes. I have an example I work with, although it’s not pretty

   { // file manager link
   			input=newEl('a','np1',0,'Click to edit');
   			input.onclick=function(){
   				eval("window.SetUrl=function(value){$('inp1').value=value;var img=newImg(value.replace(/(.*)\\/([^\\/]*)/,'$1/.thumbs/icon_$2'));"
   					+"replaceEl($('inp1image'),img);img.id='inp1image';setStyles($('image_reset'),'display:inline');};");
   				window.open(
   					"/j/fckeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/php/connector.php&Type=Image",
   					"fileupload",
   					"modal,width=600,height=400"
   				);
   			};
   		}
   

   I’m afraid that example uses some custom classes defined elsewhere (you can see them here, for example), but hopefully the method used is clear enough for you to rewrite using your own toolkit.

4. Kae Verens says:
   June 16th, 2006 at 9:55 am

   actually, that doesn’t include enough information. here is a wider view:

   	{ // image
   		var value=data.image_url;
   		var inp2=newInput('inp1','hidden',value);
   		var img=value?newImg(value.replace(/(.*)\/([^\/]*)/,"$1/.thumbs/icon_$2")):newEl('span',0,0,'[no image]');
   		img.id='inp1image';
   		{ // file manager link
   			input=newEl('a','np1',0,'Click to edit');
   			input.onclick=function(){
   				eval("window.SetUrl=function(value){$('inp1').value=value;var img=newImg(value.replace(/(.*)\\/([^\\/]*)/,'$1/.thumbs/icon_$2'));"
   					+"replaceEl($('inp1image'),img);img.id='inp1image';setStyles($('image_reset'),'display:inline');};");
   				window.open(
   					"/j/fckeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/php/connector.php&Type=Image",
   					"fileupload",
   					"modal,width=600,height=400"
   				);
   			};
   		}
   		{ // image reset link
   			var ir=newEl('a','image_reset',0,'[x]');
   			ir.onclick=function(){
   				$('inp1').value='';
   				var img=newEl('span',0,0,'[no image]');
   				replaceEl($('inp1image'),img);
   				img.id='inp1image';
   				setStyles(this,'display:none');
   			}
   			if(!value)setStyles(ir,'display:none');
   		}
   		appendChildren(input,[inp2,img]);
   		addCells(addRow(formtable,rows++),0,[[newText('Image'),'th'],[[input,ir]]]);
   	}
   

   in this case, the input will be called “inp1″, and will end up either blank, or with the URL of the image.

5. Paul says:
   June 19th, 2006 at 10:42 pm

   Thanks very much, I’ll try integrating that code.
   Being such a useful feature you’d think there would be something in the FCK documentation about launching the file manager seperate to the editor.

6. akkad says:
   September 26th, 2006 at 6:55 am

   execuse me ! i want to know how i can upload a pic. on my site to include it in the article using FCK editor , plz answer me and i’ll be thankfull, plz send the answer on my email

7. Kae Verens says:
   September 26th, 2006 at 7:44 am

   akkad, this article assumes that you already know how to do that.

   please rtfm

8. zmh says:
   June 23rd, 2007 at 5:50 am

   when editor file if deleting image then automanaul delete image’s file in server