The CKEditor plugin makes it simple to add a WYSIWYG editor to a web form’s input field. In most cases, the WYSIWYG editor is used to input HTML content instead of the textarea. With the CKEditor plugin, you can easily add a WYSIWYG editor to a textarea. The CKEditor plugin allows users to paste HTML into the textarea field and submit prepared text to the server.
CKEditor’s Image plugin makes it easy to insert images into the editor. You must give the URL of the image to be inserted into the editor content in this scenario. The Image plugin is unable to upload and insert images into CKEditor. If you wish to upload an image to the server and then insert it into the editor content, you’ll need to add custom image upload capabilities into CKEditor. In this tutorial, we’ll teach you how to use PHP to upload an image to CKEditor and then insert it into the editor content.
Before you begin, make sure you have the Standard Package of the CKEditor plugin downloaded. Place the CKEditor plugin archive in the root directory after downloading it. You don’t need to download the CKEditor individually because all of the necessary files are present in our source code.
Textarea using CKEditor
1. Create a textarea element that you want CKEditor to replace.
<textarea name="editor" id="editor"></textarea>2. Add the CKEditor jQuery plugin library file to the mix.
<script src="ckeditor/ckeditor.js"></script>3. Make use of CKEDITOR. To initialise the CKEditor plugin and replace the textarea element with a WYSIWYG editor, use the replace() method.
<script>
CKEDITOR.replace('editor');
</script>Configure the Image Upload URL
CKEDITOR can be given some more configuration options.
In CKEditor, use the replace() method to add an upload dialogue.
To provide the URL of the image upload script (ck upload.php), use the filebrowserUploadUrl config option.
Configure the form’s filebrowserUploadMethod config option.
<script>
CKEDITOR.replace('editor', {
filebrowserUploadUrl: 'ckeditor/ck_upload.php',
filebrowserUploadMethod: 'form'
});
</script>On the Image Properties dialogue, the above configuration will add an Upload tab. It lets the user to choose a file to upload and transmit it to the server-side script.
(ckeditor/ck upload.php) Upload an image to the server
The ck upload.php file uses PHP to manage the file upload procedure.
Set the upload directory and image characteristics that are permitted.
Validate the image’s size and kind.
Using PHP’s move uploaded file() method, upload a picture to the server.
Return to CKEditor after rendering the image as HTML.
The upload status will be displayed in an alert window if the picture upload is successful.
In the editor, paste the image you just submitted.
<?php
// Define file upload path
$upload_dir = array(
'img'=> 'uploads/',
);
// Allowed image properties
$imgset = array(
'maxsize' => 2000,
'maxwidth' => 1024,
'maxheight' => 800,
'minwidth' => 10,
'minheight' => 10,
'type' => array('bmp', 'gif', 'jpg', 'jpeg', 'png'),
);
// If 0, will OVERWRITE the existing file
define('RENAME_F', 1);
/**
* Set filename
* If the file exists, and RENAME_F is 1, set "img_name_1"
*
* $p = dir-path, $fn=filename to check, $ex=extension $i=index to rename
*/
function setFName($p, $fn, $ex, $i){
if(RENAME_F ==1 && file_exists($p .$fn .$ex)){
return setFName($p, F_NAME .'_'. ($i +1), $ex, ($i +1));
}else{
return $fn .$ex;
}
}
$re = '';
if(isset($_FILES['upload']) && strlen($_FILES['upload']['name']) > 1) {
define('F_NAME', preg_replace('/\.(.+?)$/i', '', basename($_FILES['upload']['name'])));
// Get filename without extension
$sepext = explode('.', strtolower($_FILES['upload']['name']));
$type = end($sepext); /** gets extension **/
// Upload directory
$upload_dir = in_array($type, $imgset['type']) ? $upload_dir['img'] : $upload_dir['audio'];
$upload_dir = trim($upload_dir, '/') .'/';
// Validate file type
if(in_array($type, $imgset['type'])){
// Image width and height
list($width, $height) = getimagesize($_FILES['upload']['tmp_name']);
if(isset($width) && isset($height)) {
if($width > $imgset['maxwidth'] || $height > $imgset['maxheight']){
$re .= '\\n Width x Height = '. $width .' x '. $height .' \\n The maximum Width x Height must be: '. $imgset['maxwidth']. ' x '. $imgset['maxheight'];
}
if($width < $imgset['minwidth'] || $height < $imgset['minheight']){
$re .= '\\n Width x Height = '. $width .' x '. $height .'\\n The minimum Width x Height must be: '. $imgset['minwidth']. ' x '. $imgset['minheight'];
}
if($_FILES['upload']['size'] > $imgset['maxsize']*1000){
$re .= '\\n Maximum file size must be: '. $imgset['maxsize']. ' KB.';
}
}
}else{
$re .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed extension type.';
}
// File upload path
$f_name = setFName($_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir, F_NAME, ".$type", 0);
$uploadpath = $upload_dir . $f_name;
// If no errors, upload the image, else, output the errors
if($re == ''){
if(move_uploaded_file($_FILES['upload']['tmp_name'], $uploadpath)) {
$CKEditorFuncNum = $_GET['CKEditorFuncNum'];
$url = 'ckeditor/'. $upload_dir . $f_name;
$msg = F_NAME .'.'. $type .' successfully uploaded: \\n- Size: '. number_format($_FILES['upload']['size']/1024, 2, '.', '') .' KB';
$re = in_array($type, $imgset['type']) ? "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>":'<script>var cke_ob = window.parent.CKEDITOR; for(var ckid in cke_ob.instances) { if(cke_ob.instances[ckid].focusManager.hasFocus) break;} cke_ob.instances[ckid].insertHtml(\' \', \'unfiltered_html\'); alert("'. $msg .'"); var dialog = cke_ob.dialog.getCurrent();dialog.hide();</script>';
}else{
$re = '<script>alert("Unable to upload the file")</script>';
}
}else{
$re = '<script>alert("'. $re .'")</script>';
}
}
// Render HTML output
@header('Content-type: text/html; charset=utf-8');
echo $re;Note
Using PHP, you can add custom image upload capability to CKEditor using our sample script. It allows you to upload images to the server and have them included to CKEditor automatically. Without the use of a plugin, you can easily incorporate the server-side image upload capabilities in CKEditor.