How can I use Ckfinder with Ckeditor?

Question

I was used Ckeditor in my project. It was worked well. I can put picture in texts but with an url. I know that,if I want upload an picture from my pc, I must used CKfinder. How can I use Ckfinder with Ckeditor?

I use this code to call CKeditor:

 protected void Page_Load(object sender, EventArgs e)
{
    String StrScript = "CKEDITOR.replace( '" + TextBox1.ClientID + "',{toolbar : 'Full'});";
    ClientScript.RegisterStartupScript(this.GetType(), "Ck-Js/ckeditor", StrScript, true);

}

Thanks.

score 5 · Accepted Answer · answered May 30 '13 at 09:02

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.

score 1 · Answer 2 · answered May 14 '13 at 14:51

I think you want use CKFinder and CKEditor, try this :

score 1 · Answer 3 · answered Sep 10 '14 at 20:59

If anyone is still having problems integrating CKFinder with CKEditor, try using KCFinder (http://kcfinder.sunhater.com/) instead.

It has all the same functions as CKFinder, but its free, open source, and much easier to install and setup. (Personally, I was never able to get CKFinder installed properly....)

The installation instructions for KCFinder are here: http://kcfinder.sunhater.com/install

And the integration instructions are here: http://kcfinder.sunhater.com/integrate

score 1 · Answer 4 · edited Aug 30 '19 at 08:02

https://ckeditor.com/ckeditor-4/download/

download ckfinder place it both in single place then

<textarea class="ckeditor" id="editor1"></textarea>

place this code in footer.php or direct on page also

CKEDITOR.replace( 'editor1', {
    filebrowserBrowseUrl: 'https://example.com/admin/ckfinder/ckfinder.html',
    filebrowserImageBrowseUrl: 'https://example.com/admin/ckfinder/ckfinder.html?type=Images',
    filebrowserUploadUrl: 'https://example.com/admin/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
    filebrowserImageUploadUrl: 'https://example.com/admin/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'
});

in ckfinder/config.php file open and make some change

$config['authentication'] = function () {
  return true;
};

$config['backends'][] = array(
  'name'         => 'default',
  'adapter'      => 'local',
  'baseUrl'      => 'https://example.com/admin/ckfinder/userfiles/',
  //  'root'         => '', // Can be used to explicitly set the CKFinder user files directory.
  'chmodFiles'   => 0777,
  'chmodFolders' => 0755,
  'filesystemEncoding' => 'UTF-8',
);

That's it, it work for me.
If this is helpful for you please rate us me

How can I use Ckfinder with Ckeditor?

4 Answers4