Today we will see how to upload and insert images in CKEditor using PHP, then First of all we will download CKEditor and apply it to our website If you don’t know how to download CKEditor then I have told you in the last blog how to download CKEditor.
How to Download CKEditor ?
After downloading, we will follow the steps given below.
Step 1: Create index.php File.
If you want to add CKEditor online then you have to add the CDN of CKEditor online which is given below.
index.php: This is the main HTML file where you include CKEditor and set up the textarea element for the editor to work with.
Online CKEditor CDN Add
<script src="https://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ckeditor</title>
<script src="https://cdn.ckeditor.com/4.16.1/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="description" id="editor" class="form-control" id="exampleTextarea1" rows="4"></textarea>
<script>
CKEDITOR.replace('editor', {
filebrowserUploadUrl: 'upload.php',
filebrowserUploadMethod: 'form'
});
</script>
</body>
</html>
Here, you’ve included the CKEditor library using a script tag. The “<textarea>” element with the ID “editor” is used to create the CKEditor instance. The configuration options are set in the script, including the filebrowserUploadUrl which points to the “upload.php” script for handling image uploads.
Step 2: Create upload.php File.
Create an upload.php file and paste the following code into it.
upload.php: This script handles the image upload and communicates back to CKEditor after the upload is complete.
<?php
if ($_FILES['upload']['error'] === UPLOAD_ERR_OK) {
$fileName = $_FILES['upload']['name'];
$destination = 'uploads/' . $fileName;
if (move_uploaded_file($_FILES['upload']['tmp_name'], $destination)) {
$url = 'uploads/' . $fileName;
echo '<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(' . $_GET['CKEditorFuncNum'] . ', "' . $url . '");</script>';
}
} else {
echo "File upload failed with error code: " . $_FILES['upload']['error'];
}
?>
This PHP script checks if the file upload was successful. If successful, it retrieves the name of the uploaded file and moves it to a directory named “uploads.” It then constructs the URL to the uploaded file and uses a JavaScript call to communicate with CKEditor. The “$_GET['CKEditorFuncNum']” value is passed to the JavaScript callback function, which is used by CKEditor to insert the image into the editor.
Uploads Folder: You’ve mentioned that you created a folder named “upload” to store the uploaded images. This is where the uploaded images will be saved.
In summary, the provided code sets up CKEditor in an HTML file, and when a user uploads an image through CKEditor, the PHP script “upload.php” handles the upload and communicates back to CKEditor to insert the uploaded image into the editor. The images are stored in the “uploads” folder.
Note: Create a folder named upload to store the image.
