How to upload images using CKEditor?

Thank you for your help! I was able to solve the problem by doing the following:

1 - I downloaded CKEDITOR and KCFinder and unzipped them in the root folder of my site;
2 - I created a form in index.php (Note that I called the class="ckeditor" in the form)

<textarea class="ckeditor" name="documento_conteudo"></textarea>  

3 - Includes Script and CSS in the head of the page:

<script src="ckeditor/ckeditor.js"></script>  

4 - After that, I put the KCFinder folder inside the folder CKEDITOR, thus giving the structure:

.. ckeditor /. ..ckeditor / kcfinder /.

5 - Open the 'ckeditor / config.js' file and include the KCFINDER integration code, the file should look like this:

/**
 * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#004d66';
        config.filebrowserBrowseUrl = 'ckeditor/kcfinder/browse.php?opener=ckeditor&type=files';
   config.filebrowserImageBrowseUrl = 'ckeditor/kcfinder/browse.php?opener=ckeditor&type=images';
   config.filebrowserFlashBrowseUrl = 'ckeditor/kcfinder/browse.php?opener=ckeditor&type=flash';
   config.filebrowserUploadUrl = 'ckeditor/kcfinder/upload.php?opener=ckeditor&type=files';
   config.filebrowserImageUploadUrl = 'ckeditor/kcfinder/upload.php?opener=ckeditor&type=images';
   config.filebrowserFlashUploadUrl = 'ckeditor/kcfinder/upload.php?opener=ckeditor&type=flash';
   };  

6 - After, let's configure the permission to list the images folder, in "ckeditor / kcfinder / conf / config.php":

Changing the value of the field 'disabled' => true, to 'disabled' => false,

Done, the file upload worked on the CKEDITOR!

PS: The Tutorial I followed was the one contained in this video here: YOUTUBE

Thanks to everyone, and I hope to have helped!

You have two options for this. You can use some ckeditor plugin ready to upload, as has already been said, we have the CKFider , KCFinder , Image Upload , Image Upload and Browser , among many others .

Now, if you want to build your plugin or do something similar, you can check CKEditor's Developer Guid , which it has everything it takes to understand how it works.

But in advance, these plugins only open a window (usually called a server) where it contains all the images. This is usually a URL that returns the images from a specific directory (local or non-local). Once you have the images, just click on the selected image (if you are uploading, the image will be played in this directory) for your selection. With this, CKEditor only adds the path to the image in the code.

But if you want to use a plugin ready, I'll explain how to configure File Browser .

• First step: Download the popup plugin and the File Browser .
• Step two: Place the two in the plugins folder of CKEditor.

• Step three: Add the plugins to the file config.js , like this:

  config.extraPlugins = 'popup';
  config.extraPlugins = 'filebrowser';
  

• Fourth step: Add the URL where you will upload the image to the file config.js .

  config.filebrowserImageUploadUrl = '/ckeditor/UploadImage';

To work, this path must contain a method to receive an image, save to the desired folder, and return the path, such as the one below that was taken from CKEditor forum. :

if(isset($_FILES['upload'])){
  // ------ Process your file upload code -------
   $filen = $_FILES['upload']['tmp_name'];
   $con_images = "uploaded/".$_FILES['upload']['name'];
   move_uploaded_file($filen, $con_images );
   $url = $con_images;

   $funcNum = $_GET['CKEditorFuncNum'] ;
   // Optional: instance name (might be used to load a specific configuration file or anything else).
   $CKEditor = $_GET['CKEditor'] ;
   // Optional: might be used to provide localized messages.
   $langCode = $_GET['langCode'] ;

   // Usually you will only assign something here if the file could not be uploaded.
   $message = '';
   echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
}

Once this is done, your config.js file should contain this data:

CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = 'popup';
    config.extraPlugins = 'filebrowser';
    config.filebrowserImageUploadUrl = '/ckeditor/UploadImage';
};

With this, when you open dialog of image, you have the following upload option:

  

Check the method in PHP to see it does not contain any errors, as I could not test it and it can be done in N different ways.

You can use KCFinder . It can be integrated with CKEditor and it works well. On the official site there are several tutorials.

There is a CKE plugin called Upload Image , takes a look at his documentation and installs it into your project, it solves everything from uploading images.