what is CKfinder? and How to setup CKfinder in a website?

CKFinder is an Ajax File Manager that seamlessly integrates with CKEditor. It makes it easy to securely include files and images to content created with the editor.
It takes nearly 5 minutes to complete setup:


  • Download CKEditor and CKFinder.


  • Put extracted code of both in one folder inside xampp as below 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() {
    return true;
}
$baseUrl = 'http://localhost/integrated/uploads/';
$enabled = true;
$config['SecureImageUploads'] = false;
$config['ChmodFolders'] = 0777 ;
Now open url http://localhost/integrated/ and try uploading image.

Comments

Popular posts from this blog

Microsoft Toolkit 2.5.4 Windows and Office Activation

Advantages and disadvantages of USE CASE diagram

How to Set Up a Counter Strike LAN Game