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)