How can I use Ckfinder with Ckeditor?

StackOverflow https://stackoverflow.com/questions/16536975

  •  29-05-2022
  •  | 
  •  

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.

Was it helpful?

Solution

it takes nearly 5 minutes to complete setup:

  1. Download CKEditor and CKFinder.
  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() {
    return true;
}
$baseUrl = 'http://localhost/integrated/uploads/';
$enabled = true;
$config['SecureImageUploads'] = false;
$config['ChmodFolders'] = 0777 ;
  2. Now open url http://localhost/integrated/ and try uploading image.

OTHER TIPS

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

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

  2. 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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top