In CKEditor, we only can insert image from other link and url. It doesn’t allow us to upload image to server and get the url. After getting with this trouble in my application, I found out how to make a function for upload image with PHP and CKEditor.
First, we must have CKEditor, we can download it
here
. We must download in standard or full version, because only the two versions support us with image inserted.
In script tag, which we call CKEditor put one more code:
CKEDITOR.replace( 'editor1', { filebrowserUploadUrl: "upload/upload.php" } );
In line 2, “ upload/upload.php “ this is the url where upload function will be called and processed upload image
In upload.php
if (file_exists("img/"; . $_FILES["upload"]["name"])) { echo $_FILES["upload"]["name"] . " already exists please choose another image."; } else { move_uploaded_file($_FILES["upload"]["tmp_name"], "img/" . $_FILES["upload"]["name"]); echo "Stored in: " . "img/" . $_FILES["upload"]["name"]; }
You can put more rules to upload.php. E.g allow jpeg, jpg and png, or file size limit at 2 megabytes
Try to run our application.
If you get an error “ image source url is missing “, that means the url of the image doesn’t pass to the image info tab, you can fix this error by adding the php code to pass the image url.
In upload.php file
Add the following code in the
else
function
// Required: anonymous function reference number as explained above. $funcNum = $_GET['CKEditorFuncNum'] ; // Optional: instance name (might be used to load a specific configuration file or anything else). $CKEditor = $_GET['CKEditor'] ; // Optional: might be used to provide localized messages. $langCode = $_GET['langCode'] ; // Check the $_FILES array and save the file. Assign the correct path to a variable ($url). $url = "img/" . $_FILES["upload"]["name"]; // Usually you will only assign something here if the file could not be uploaded. $message = ''; echo "<script type='text/javascript'> window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
This is what we have done.