Search code examples
ckeditorckfinder

How can I use Ckfinder with Ckeditor?


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.


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.