CKEditor filebrowser plugin

Question

Can anyone explain with examples for everyone how to integrate CKEditor and external file browser? Where to put this code:

    CKEDITOR.replace( 'editor1', {
    filebrowserBrowseUrl: '/browser/browse.php',
    filebrowserUploadUrl: '/uploader/upload.php'
});

And what shoud return these:

browse.php
upload.php

I think the answer for this question should be here. So many peeople asked this question, but there is no definitive guide to this plugin. SO members, maybe some of you can?

Answer 1

filebrowserBrowseUrl will be the url of a page that allows a user to choose a file on the server. This page will be opened in a new window.
These arguments will be added to the url CKEditor=editor&CKEditorFuncNum=2&langCode=en-gb

• CKEditor is the current editor
• CKEditorFuncNum is the function to call(pass this value to callFunction)
• langCode is the language

in the popup window call

window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum, 'img_url');

to set the selected image and optionally window.close(); to close the window.
e.g.

<?php
$files = glob('/images/directory/*.{jpg,png,gif,bmp}', GLOB_BRACE);
if (count($files) > 0){
    echo 'Select a file <ul>';
    foreach ($files as $file) {
        echo '<li><button onclick="select(this)" data-name="'.$file.'">.basename($file).</button></li>'; 
    }
    echo '</ul>';
}
?>
<script>
    function select(el){
        window.opener.CKEDITOR.tools.callFunction(<?php echo (int)$_GET['CKEditorFuncNum'] ?>, el.getAttribute('data-name'));
        window.close();
    }
</script>

filebrowserUploadUrl will be the url that handles the image upload.
Its just a standard file upload handler except you run some js on the page.
and same arguments are added to the url as with filebrowserBrowseUrl.

<?php
... handle the upload
?>
<script>
    window.parent.CKEDITOR.tools.callFunction(<?php echo (int)$_GET['CKEditorFuncNum'], ', ', json_encode($uploaded_image_url), ', ', json_encode($message_on_failure) ?>);
</script>";

Simple Demo http://jsfiddle.net/mowglisanu/f2ztp/show/ (upload doesn't actually work though)
http://jsfiddle.net/mowglisanu/f2ztp/
http://jsfiddle.net/mowglisanu/GuA6s/show/
http://phpfiddle.org/api/run/dv4-e70