CKeditor integration with FCKeditor filebrowser

Question

Hi everybody. I'm using CKeditor 3 and I need integrate a filebrowser/uploader. It need to be free. I tried to integrate the one what come with FCKeditor but I allways got and xml error: http://pastie.org/743024

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 the FCKeditor get integrated with CKeditor?? if yes, how this can get done? if don't, knows somebody a free filebrowser/uploader??

Thanks in advance.

Answer 1

I'm using a custom file browser with my implementation of ckeditor, so I don't see why you couldn't use the old file browser. It uses the same javascript to populate the editor.

Just install the old FCK editor in whatever directory, and make sure you have the correct path to that browser in your config. I'm guessing that you have a pathing problem above.

Answer 2

I am just trying CK Editor, Getting problem integrating the image upload browser. How to do it? Any examples.

Answer 3

Hi

To answer your question I have posted one small tutorial on my blog with step by step instructions to integrate the File Browser of FCKEditor in CKEditor. Please goto:

http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/

I have done this for PHP connector but should be pretty simple for other languages as well.

You can also download the already done example or view the demo from this article.

Answer 4

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

Answer 5

@Brombomb, great solution. I have been looking for enabling the quick upload, and you have done a great work. I have updated my tutorial with your hacks making it slightly more systematic and closer to FCKeditor's default file upload function. You may like to review it again at

http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/

Thanks and great work again.

Answer 6

wtf???

what do you do at or after the ...

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

...

if($CKEcallback == '')