Image uploading with a text editor is an essential feature in PHP. Users can upload images within the content and update images anytime using a text editor. Images play important role in website development. In this tutorial, we will upload images with CKEditor using PHP. As you know, CKEditor is one of the famous HTML text editor. You can upload images with CKEditor using filebrowserUploadUrl. In a tutorial, we already learned how to replace the HTML text area with CKEditor. In this tutorial, we will learn, how to upload images in CKEditor using PHP programming.
Upload image with CKEditor using PHP –
It’s a very easy process with Advanced File Manager Configuration. First of all, you have to download the CKEditor library and store it in your project.
Step 1 - Download CKEditor
Download the CKEditor library. You can select any package from there. We suggest downloading Standard Package.
Step 2 – Extract the CKEditor Zip file
Kindly extract the zip file and move the CKEditor folder to your project.
Step 3 – Replace the HTML Textarea to the text editor with the CKEditor library
Now, create an index.php file and change the textarea to text-editor with the CKEditor library. Make sure to check your CKEditor js file path.
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upload image with CKEditor HTML text editor using PHP</title>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h1>Upload image with Ckeditor in PHP.</h1>
<form>
<label> Content </label> <br>
<textarea name="content" rows="5" cols="80"></textarea>
<script>
CKEDITOR.replace( 'content', {
height: 300,
filebrowserUploadUrl: "upload.php"
});
</script>
</form>
</body>
</html>
In the above code, we have used the filebrowserUploadUrl property in JavaScript and also height. You can set the CKEditor height according to your need. The filebrowserUploadUrl property is used to show the upload button in CKEditor.If the upload button and Upload form is missing in CKEditor then kindly add the filebrowserUploadUrl property in javascript.
Step 4 – Create Upload operation in PHP
As you can see in the above code, we have provided a PHP file name upload.php. It will execute and upload an image file in a folder or database. You can insert the image name in the database and move the image to a folder in this file.
Let’s create a PHP file.
upload.php
<?php //CKeditor upload operation
if(isset($_FILES['upload']['name']))
{
$file = $_FILES['upload']['tmp_name'];
$file_name = $_FILES['upload']['name'];
$file_name_array = explode(".", $file_name);
$extension = end($file_name_array);
$new_image_name =rand() . '.' . $extension;
if($extension!= "jpg" && $extension != "png" && $extension != "jpeg" && $extension != "PNG" && $extension != "JPG" && $extension != "JPEG") {
echo "<script type='text/javascript'>alert('Sorry, only JPG, JPEG, & PNG files are allowed. Close image properties window and try again');</script>";
}
elseif($_FILES["upload"]["size"] > 1000000) {
echo "<script type='text/javascript'>alert('Image is too large: Upload image under 1 MB . Close image properties window and try again');</script>";
}
else
{
move_uploaded_file($file, 'uploads/' . $new_image_name);
//mysqli_query($mysqli,"INSERT into media(image) VALUES('$new_image_name')"); //Insert Query
$function_number = $_GET['CKEditorFuncNum'];
$url = 'http://localhost/post/uploads/'.$new_image_name; //Set your path
$message = '';
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($function_number, '$url', '$message');</script>";
}
}
?>
In the above code, we have created folder uploads. Kindly create a new folder “uploads” and also set the image folder path in the above code.
Step 5 - Add a line in CKEditor config.js file
You can get an Incorrect server response error while uploading an image with CKEditor. Kindly edit the config.js file. You can find the config.js file in the CKEditor folder. Add a line to remove the Incorrect server response error. Add a line at the end of the previous code lines inside the
CKEDITOR.editorConfig = function( config ) { } block.
config.filebrowserUploadMethod = 'form';
Reload the page if any issue is found, just try to clear the history and cache of your browser.
You can create a MySQL database table to insert the image name with the extension and fetch and display the image with the folder name and image name with the extension (localhost/uploads/myimage.png -> echo ‘localhost/uploads/’.$image_row_variable’; ) .
Now, you can upload images with CKEditor using PHP.
Recommended Posts:-
Live Chat