This is a quick guide about integrating CKEditor

Download CKEditor from here – https://ckeditor.com/ckeditor-4/download/ I downloaded the full version.
Call the scripts in your code

<script src="ckeditor_full/ckeditor.js"></script>
...
...
<textarea required id="content" name="content"><?php echo strlen($content) ? $content : "" ?></textarea><br/> 
<script>
 var editor = CKEDITOR.replace('content');
 //CKEDITOR.instances['content'].setData("");
 CKFinder.setupCKEditor(editor); //see below - this is for the CKFinder and can be omitted if file uploading is not needed
</script>
...
...
...
<script> 
//validation if needed
 if(document.getElementById("content").value.length == 0)
 {
   CKEDITOR.instances[0].updateElement(); //Updates the <textarea> element that was replaced by the editor with the current data available in the editor. This is to ensure that it is updated before doing the check alert("Provide the mail body"); return false; } </script>

The above will replace the plain textarea with the CKEditor.

The number of toolbars and tools depends on the version of CKEditor (full or basic etc).

For a customizing the toolbar

CKEDITOR.editorConfig = function( config ) {
           // Define changes to default configuration here.
          // For complete reference see:
          // http://docs.ckeditor.com/#!/api/CKEDITOR.config

         // The toolbar groups arrangement, optimized for two toolbar
          rows.config.toolbarGroups = [


{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];

For making the file upload and drag drop uploads working with album view

Download the CKFinder from here  https://ckeditor.com/ckfinder/download/  I used the PHP version
Call the script in the code

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

Open the config.php file (under root of the ckfinder folder) and modify the following highlighted lines with suitable values

$config['backends'][] = array(
   'name' => 'default',
   'adapter' => 'local',
    'baseUrl' => 'https://xxxxxxxxxx.com/projectname/ckfinder/userfiles/', /* note - I have used an URL but folder names and paths can be used also*/
    // 'root' => '', // Can be used to explicitly set the CKFinder user files directory.
    'chmodFiles' => 0644, //this by default was 777 I changed that to 644
    'chmodFolders' => 0755,
   'filesystemEncoding' => 'UTF-8',
);

Enable the PHP adapter (we used the default PHP adapter that comes with the CKFinder)

$config['authentication'] = function () {
   return true;  // by default this is false
};

Add the required plugins and enable them in the config.js of the CKEditor

CKEDITOR.editorConfig = function( config ) {
      // Define changes to default configuration here. For example:
     // config.language = 'fr';
    // config.uiColor = '#AADC6E';

    config.extraPlugins = 'notification';  //https://ckeditor.com/cke4/addon/notification -- required by Notification Aggregator plugin
    config.extraPlugins = 'notificationaggregator'; //https://ckeditor.com/cke4/addon/notificationaggregator  -- -- required by Upload

    config.extraPlugins = 'filetools';   //https://ckeditor.com/cke4/addon/filetools -- required by Upload
    config.extraPlugins = 'uploadwidget'; //https://ckeditor.com/cke4/addon/uploadwidget -- required by uploadimage
    config.extraPlugins = 'uploadimage'; //
};

The PHP connector comes with the CKFinder

Here are the files used above (latest versions as of time of writing)

filetools_4.11.2

notificationaggregator_4.11.2

notification_4.11.2

ckfinder_php_3.4.5

ckeditor_4.11.2_full

uploadwidget_4.11.2

uploadimage_4.11.2