using FCKeditor's file manager for your own CMS

I’ve just finished round one of the debugging of our new product, WebME 1.0 (which I’ll be announcing soon).

Part of the debugging process was to try reduce the redundancy in the various parts of the backend.

One annoying aspect was the amount of image and file upload mechanisms I have in the admin area, for various parts. So, as I was rewriting one part of it today anyway, I thought I’d try attach FCKeditor‘s file manager to my own forms.

This ended up being vastly easier than I thought it would be!

the demo

For example, let’s say your fckeditor is located in /demos/FCKeditor/, the following will add the location of a file into an input box:

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);

You can then use that value in your form.

This takes all the hassle of file uploads away, as you allow the FCKeditor’s file manager to handle all that ickiness.

8 Comments.

  1. 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. 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. 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. 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. 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. 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. akkad, this article assumes that you already know how to do that.

    please rtfm

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

%d bloggers like this: