Filhåntering i CKEditor

Igennem en del år har jeg benyttet FCKEditor som WYSIWYG editor i mine webprojekter, men efterhånden var FCKEditoren blevet lidt tung og derfor besluttede holdet bag at lave en helt ny version. Den har de så valgt at kalde CKEditor.
Den nye CKEditor er meget lettere, nemmere at konfigurere og sætte op. Men den har en stor ulempe i forhold til FCKEditoren. Den har nemlig ingen filhåndtering :-/
De har valgt at lave den nye filhåndtering som en eksternt plugin og den vil de have penge for. Der er dog en del forskellige ikke betalings filhåndteringer på nettet, så jeg satte mig til at finde en brugbar løsning.

Jeg stødte ind i en del som har brugt den gamle filhåndtering fra FCKEditoren, så her er så en vejledning til hvordan det skal gøres.

1. Kopier først filhåndteringen fra FCKEditoren over i CKEditor mappen. Den ligger i mappen fckeditor/editor/ og hedder filemanager. Jeg har lagt i roden af CKEditor mappen.
2. Så skal vi have sat CKEditor op til at benytte filhåndtering. Det valgte jeg at gøre i den globale konfigurationsfil til CKEditor. Så jeg åbnede filen config.jssom ligger i roden af CKEditor mappen, så skal følgende tilgøjes.

       // filebrowser
       config.filebrowserBrowseUrl = '/ckeditor/filemanager/browser/default/browser.html?Connector=http://demo.generalfailure.dk/ckeditor/filemanager/connectors/php/connector.php';
       config.filebrowserImageBrowseUrl = '/ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=http://demo.generalfailure.dk/ckeditor/filemanager/connectors/php/connector.php';
       config.filebrowserFlashBrowseUrl = '/ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=http://demo.generalfailure.dk/ckeditor/filemanager/connectors/php/connector.php';

   Vær opmærksom på stien til CKEditor. Jeg har i dette eksempel plaseret den i roden, men dette kan skal du blot ændre så det passer til den placering du har. Desuden har jeg benyttet demo.generalfailure.dk som domæne. Dette skal du også rette til så det passer til dit setup.

3. Husk  at sørge for at følge vejledningen til hvordan du sætter file conneter op i FCKEditoren. Den skal nemlig aktiveres og sættes op så filer kommer til at ligge det sted du ønsker.
   Opsætningen skal laves i filen filemanager/connectors/php/config.php.
4. For at filhåndteringen virker skal der lige rettes lidt i den. I filen filemanager/browser/default/frmresourcelist.htmlskal du sætte følgende ind, sammen med de andre javascript funktioner.

   function GetUrlParam( paramName )
   {
   	var oRegex = new RegExp( '[\?&]' + paramName + '=([^&]+)', 'i' ) ;
   	var oMatch = oRegex.exec( window.top.location.search ) ;
   
   	if ( oMatch && oMatch.length > 1 )
   		return decodeURIComponent( oMatch[1] ) ;
   	else
   		return '' ;
   }

   Desuden skal du finde funktionen OpenFilesom findes i samme fil. Denne funktion skal du ændre så den kommer til at se ud som fælgende.

   function OpenFile( fileUrl )
   {
   	funcNum = GetUrlParam('CKEditorFuncNum') ;
   	//fixed the issue: images are not displayed in preview window when filename contain spaces due encodeURI encoding already encoded fileUrl
   	window.top.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl);
   
   	window.top.close() ;
   	window.top.opener.focus() ;
   }

   Dette vil sætte visnings billedet i dialogboksen, når man vælger et billede.