CODEWITHSUNDEEP
ckeditorelfinder
Beda
Beda

Reputation: 49

CKEditor and elFinder integration example

I try to follow an instruction in elfinder.org how to Integration CKEditor with elFinder but not work. is there an example of CKEditor that has been integrated with elFinder, if anybody know, please share it.

Thanks

Upvotes: 4

Views: 9076

Answers (2)

Ganesh Bhosale
Ganesh Bhosale

Reputation: 2100

This might be helpful if you are using CKFinder. Try following steps.

1. Download CKEditor and CKFinder. Integrated code may be available on http://dwij.co.in/ckeditor-ckfinder-integration-using-php/
2. Put extracted code of both in one folder inside xampp as below. 3. Create index file (index.html) which will be containing the editor as below code.

    <html>
    <head>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="ckfinder/ckfinder.js"></script>
    </head>
    <body>
        <h1>CKEditor CKFinder Integration using PHP</h1>
        <textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>
    <script type="text/javascript">
    var editor = CKEDITOR.replace( 'editor1', {
        filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
        filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?type=Images',
        filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?type=Flash',
        filebrowserUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
        filebrowserImageUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
        filebrowserFlashUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
    });
    CKFinder.setupCKEditor( editor, '../' );
    </script>
    </body>
    </html>

so your folder structure will be something like this:

htdocs
|_integrated
    |_ckeditor
    |   |_config.js
    |   |_...
    |_ckfinder
    |   |_config.php
    |   |_...
    |_uploads
    |_index.html

  1. Now open file config.php inside ckfinder & make following changes:

    function CheckAuthentication() {
    // WARNING : DO NOT simply return "true". By doing so, you are allowing
    // "anyone" to upload and list the files in your server. You must implement
    // some kind of session validation here. Even something very simple as...
    // return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
    return true; // not good option though; go for sessions
}
$baseUrl = 'http://localhost/integrated/uploads/';
$enabled = true;
$config['SecureImageUploads'] = false;
$config['ChmodFolders'] = 0777 ;
  2. Now open url http://localhost/integrated/ and try uploading image.

Upvotes: -5

EpokK
EpokK

Reputation: 38092

I found an example with CKEditor and elFinder here : http://elrte.org/redmine/attachments/409/elfinder.html

$().ready(function() {

   var funcNum = window.location.search.replace(/^.*CKEditorFuncNum=(\d+).*$/, "$1");
   var langCode = window.location.search.replace(/^.*langCode=([a-z]{2}).*$/, "$1");

   $('#finder').elfinder({
      url : 'connectors/php/connector.php',
      lang : langCode,
      editorCallback : function(url) {
         window.opener.CKEDITOR.tools.callFunction(funcNum, url);
         window.close();
      }
   })

})

Upvotes: 1

Related Questions