CKeditor integration with FCKeditor filebrowser

Question

I'm using CKEditor 3 and I need to integrate a cost-free filebrowser/uploader. I tried to integrate the one that comes with FCKEditor but I always get this XML error:

The server didn't send back a proper XML response. Please contact your system administrator.

XML request error: OK (200)

Requested URL: http://example.com/admin/filemanager/browser/default/?Command=GetFoldersAndFiles&Type=File&CurrentFolder=%2F&uuid=1260817820353

Response text:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
 <head>
  <title>Index of /admin/filemanager/browser/default</title>
 </head>
 <body>
<h1>Index of /admin/filemanager/browser/default</h1>
<table><tr><th><img src="/icons/blank.gif" alt="[ICO]"></th>
  <th><a href="?C=N;O=D">Name</a></th>
  <th><a href="?C=M;O=A">Last modified</a></th>
  <th><a href="?C=S;O=A">Size</a></th>
  <th><a href="?C=D;O=A">Description</a></th></tr>

I'm trying to do it in this way:

<script type="text/javascript">
 window.onload = function(){
  CKEDITOR.config.language='es';
  CKEDITOR.config.forcePasteAsPlainText = true;
  CKEDITOR.config.enterMode = CKEDITOR.ENTER_DIV;
  CKEDITOR.replace('ncCont',{
    filebrowserBrowseUrl: 'filemanager/browser/default/browser.html',
    filebrowserUploadUrl : 'filemanager/connectors/php/upload.php'
  });
 };
</script>

Can FCKeditor be integrated with CKEditor? If yes, how can this be done? If not, is there a free filebrowser/uploader alternative?

Brombomb Brombomb · Accepted Answer · 2010-04-01T22:16:49

Wanted to piggy back off Penuel whose code helped me a lot.

add this to /filemanager/connectors/php/upload.php

// Get the CKEditor Callback
$CKEcallback = $_GET['CKEditorFuncNum'];

//modify the next line adding in the new param
FileUpload($sType, $sCurrentFolder, $sCommand, $CKEcallback);

add this to /filemanager/connectors/php/io.php

// This is the function that sends the results of the uploading process to CKE.
function SendCKEditorResults ($callback, $sFileUrl, $customMsg = '')
{
  echo '<script type="text/javascript">';

  $rpl = array( '\\' => '\\\\', '"' => '\\"' ) ;

  echo 'window.parent.CKEDITOR.tools.callFunction("'. $callback. '","'.
    strtr($sFileUrl, $rpl). '", "'. strtr( $customMsg, $rpl). '");' ; 

  echo '</script>';
}

modify this /filemanager/connectors/php/commands.php

//line 158
function FileUpload($resourceType, $currentFolder, $sCommand, $CKEcallback = '')

//line 166

  if ( (isset($_FILES['NewFile']) && !is_null($_FILES['NewFile']['tmp_name']))
    # This is for the QuickUpload tab box
    or (isset($_FILES['upload']) and !is_null($_FILES['upload']['tmp_name'])))
  {
    global $Config ;

    $oFile = isset($_FILES['NewFile']) ? $_FILES['NewFile'] : $_FILES['upload'];

...

  if($CKEcallback == '')
  {
    // this line already exists so wrap the if block around it
    SendUploadResults( $sErrorNumber, $sFileUrl, $sFileName ) ;
  }
  else 
  {
    //issue the CKEditor Callback
    SendCKEditorResults ($CKEcallback, $sFileUrl,
    ($sErrorNumber != 0 
      ? 'Error '. $sErrorNumber. ' upload failed. '. $sErrorMsg
      : 'Upload Successful'));
  }

You'll need to add the upload URL's to your CKEDITOR definition like so:

  var filemanager = '/js/ckeditor/filemanager/';
  var browser = filemanager + 'browser/default/browser.html';
  var connector = filemanager + 'connectors/php/connector.php';
  var upload = filemanager + 'connectors/php/upload.php';
  CKEDITOR.replace( id,
  {    
    customConfig : this.config,
    filebrowserBrowseUrl : browser +'?Connector=' + connector,
    filebrowserImageBrowseUrl : browser + '?Type=Image&Connector='
      + connector,
    filebrowserFlashBrowseUrl : browser + '?Type=Flash&Connector=' 
      + connector,
    filebrowserUploadUrl : upload + '?type=Files',
    filebrowserImageUploadUrl : upload + '?type=Images',
    filebrowserFlashUploadUrl : upload + '?type=Flash'
  });

I think that covers everything left off by Penuel

CKeditor integration with FCKeditor filebrowser

3 Answers