How to integrate CKFinder with CKEditor?

Question

How do you integrate CKFinder with the new CKEditor.

It is very underdocumented on the website, and i am literally getting nowhere.

A step by step guide would be greatly appreciate as, as far as i am aware.. this is the only free/good image upload solution for a wysiwyg editor that is any good. Can someone confirm?

Thanks

score 2 · Answer 1 · answered May 30 '13 at 17:04

Try doing 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

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 ;

Now open url http://localhost/integrated/ and try uploading image.

score 2 · Accepted Answer · answered Mar 11 '11 at 13:09

2

You can find a tutorial on integrating CKFinder with CKEditor here: http://www.webshaolin.com/index.php?page=article&articleid=40

answered Mar 11 '11 at 13:09

Sam

44
2

Broken link. That's why just posting a link is not a good answer. – Frank Conijn - Support Ukraine Aug 05 '21 at 00:04

score 1 · Answer 3 · answered Jul 23 '12 at 00:02

First you must have a textbox to convert to CKEditor:

<textarea id="newTextArea">Some text</textarea>

Then all you need is some javascript code for the conversion of this texteditor to a CKEditor instance and the integration of this editor with CKFinder.

<script type="text/javascript">
    var newCKEdit = CKEDITOR.replace('newTextArea');
    CKFinder.setupCKEditor(newCKEdit, '/ckfinder/');
</script>

The second parameter of the setupCKEditor function must be the folder in your website where you uploaded ckfinder.

http://docs.cksource.com/CKFinder_2.x/Developers_Guide/PHP/CKEditor_Integration

score 1 · Answer 4 · answered Sep 03 '10 at 08:31

1

Check the documentation site for your server language: http://docs.cksource.com/CKFinder_2.x For example this part of the PHP docs: http://docs.cksource.com/CKFinder_2.x/Developers_Guide/PHP/CKEditor_Integration

And btw, CKFinder is not free, you must get a license in order to use it.

answered Sep 03 '10 at 08:31

AlfonsoML

12,634
2
46
53

I checked the docs for using CKFinder 3 - and integration simply didnt work... Also you say it is not free.. meh. Is there any WYSIWYG editor which has image upload capabilities which is free to use on a simple 3 domain blogging platform i am developing? Thanks – Thomas Clowes Sep 03 '10 at 14:47

How to integrate CKFinder with CKEditor?

4 Answers4