CODEWITHSUNDEEP
ckeditorwysiwyg
user2622614
user2622614

Reputation: 35

CKEditor filebrowser plugin

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?

Upvotes: 0

Views: 2834

Answers (1)

Musa
Musa

Reputation: 97717

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

Upvotes: 3

Related Questions