Welcome to TQ CMS knowledge base. Here you will find useful information for all sorts of things.

How to Add and Upload an Image using CKEditor

Step 1: Make sure your CKEditor instance includes an "Insert Image" button

To do this, you simply add 'Image' to your toolbar options. If you're using PHP, then your function will need to look something like this:

function richTextBox($fieldname, $value = "") {

   
   $CKEditor = new CKEditor();
   $config['toolbar'] = array(
    array( 'Bold', 'Italic', 'Underline', 'Strike'),
    array('JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'),
    array('Format'),
    array( 'Font', 'FontSize', 'FontColor', 'TextColor'),
    array('Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord' ),
    array('Image', 'Table', 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'),
    array('Subscript','Superscript'),
    array( 'Link', 'Unlink' ),
    array('Source')
   );
   $CKEditor->basePath = '/ckeditor/';
   $CKEditor->config['width'] = 975;
   $CKEditor->config['height'] = 400;
   
   $CKEditor->editor($fieldname, $value, $config);
}

Notice the Image option highlighted in red. If it's not there, add it in to your function then hit reload on the page your CKEditor text box is on. The button to add an Image into your text should magically appear!

Step 2: Enable the file upload dialogue box

Then, you'll need to unhide the Upload option (pictured). You'll need to open up the JavaScript file which contains settings related to the Image Properties window. This might look a bit daunting, but don't worry; if you follow these instructions to the letter then you'll be fine!

Find the directory in your web site where you've saved and extracted CKEditor, and then it's a couple more directories further down we need to go:

ckeditor\plugins\image\dialogs

Inside that folder is a file called image.js - open this up. If you haven't already got it, I'd recommend the brilliant Notepad++ to use rather than the basic Notepad programme which comes free with Windows.

You then want to hit CTRL+F to bring up a search box, and search for config.filebrowserBrowseUrl. Shortly after that text you will see the value hidden:true; - change it to hidden:false; and then do the same for the value just after the string 'Upload'.

Voilà! You should now have the options as shown in the screenshot, but it won't yet work if you try to use it. Read on for how to programme it to work...

Step 3: Telling CKEditor where your image upload script lives

At the root of the CKEditor folder hierarchy is a file called config.js - open up this file and it should have hardly anything in it, apart from a blank-looking function like this: CKEDITOR.editorConfig = function( config )

You just need to add a line inside this function (inside the curly braces) to tell CKEditor where the script lives which will handle the uploaded image files. In our case, this line is as follows: config.filebrowserUploadUrl = '../ckupload.php'; - easy.

Following so far? Good, we're very nearly there!

Step 4: Writing the script to handle the image upload in PHP

If you need a refresher on handling uploaded files in PHP, check out PHP's superb documentation. It's at this point that I'll point out how important it is to perform validation checks on anything which you allow users (even validated users) to upload to your web site's server. Just because you're expecting a lovely JPG or PNG image, doesn't mean that's what you're gonna get. If you don't stop me, I could write a PHP script to download the entire contents of your database's members or users table, stealing their passwords and other personal data. Don't be sloppy!

With that firmly in the forefront of your mind, here is a sample ckupload.php script to handle the uploaded image files:

<? 
$url = '../images/uploads/'.time()."_".$_FILES['upload']['name'];

 //extensive suitability check before doing anything with the file...
    if (($_FILES['upload'] == "none") OR (empty($_FILES['upload']['name'])) )
    {
       $message = "No file uploaded.";
    }
    else if ($_FILES['upload']["size"] == 0)
    {
       $message = "The file is of zero length.";
    }
    else if (($_FILES['upload']["type"] != "image/pjpeg") AND ($_FILES['upload']["type"] != "image/jpeg") AND ($_FILES['upload']["type"] != "image/png"))
    {
       $message = "The image must be in either JPG or PNG format. Please upload a JPG or PNG instead.";
    }
    else if (!is_uploaded_file($_FILES['upload']["tmp_name"]))
    {
       $message = "You may be attempting to hack our server. We're on to you; expect a knock on the door sometime soon.";
    }
    else {
       $message = "";
       move_uploaded_file($_FILES['upload']['tmp_name'], $url);
    }
 
$funcNum = $_GET['CKEditorFuncNum'] ;
echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
?>
 
Basically, we check that there has actually been a file uploaded, and that it's not empty. Then, most importantly, we check it's actually a JPG or PNG. We do this by checking its MIME type (and NOT by checking its file extension - any hacker could upload a .exe file renamed to .jpg, then rename back to .exe after the check). We also do one final check to make sure the file we're dealing with is definitely the file we think we're dealing with. If that's all fine and dandy, we then use PHP's move_uploaded_file() function to move and rename the file. If you're using IIS to host your web site, you may need to ask your host to set the correct permissions to the folder in which you want to save the image. You need to give Read and Write permissions to the following user: fred\IUSR_caeus.com where "fred" is the machine name and replace "caeus.com" with the name of your site (the user to which the permissions are to be granted).
 
You'll notice at the start of the script I've included a current Unix timestamp in the filename. Since this will always be unique, that means that all files uploaded to the folder of uploaded files will never have the same filename. Otherwise, one author might upload a file called fred.jpg to include in his article. If, some months later, he/she or another author wants to upload a file with the same name for another article about someone else called Fred, the first one would get overwritten due to identical filenames. Including a timestamp is a somewhat crude way of getting around this, but it works!
 
Regardless of the outcome of the PHP if...else statements, which have hopefully resulted in the uploaded file being accepted and saved, we echo a bit of JavaScript to the browser which passes information back to CKEditor's Image Properties box. This contains the URL of where we've saved the image, and a message if needed. I've included a message for the error scenarios, but there's no need for a message indicating successful upload, as this will be obvious anyway.
 
So there we have it - you should now be able to upload and save images to your web site via the CKEditor rich-text box, and insert them into your document too.
 
If this article has helped you out, or you have any other comments, then please leave a comment in the box below and don't forget to click the buttons to share on Facebook and Twitter!
There is 56 guides in the database.

More news

Bootstrap
25 February, 2014

Bootstrap

I have implemented bootstrap into the project and changed all code in the administration to use this new framework and I really love the result that I see after a couple of hours of coding. To make things look so good has never been so easy as with
Guides
20 February, 2014

Guides

I have added some of my guides for different things when it comes to the different areas in the computer, I will continue to add guides and especially when it comes to things that I am using every now and then in my own work.
First phase completed
17 February, 2014

First phase completed

Then I had time to finish the dirty work with the page and now it only remains little touches here and there and I need to upload information about what I'm doing and my progress on the project as well.
Time for a change
16 February, 2014

Time for a change

Today I've decided to update my own personal website with the latest version of my project called TQ CMS and with a completely new design that is responsive. My goal with this project is to make it as easy as possible for the end user while

Spotlight

The next step

The next step

I have now resumed my programming after a couple of months of vacation which was very much needed. I got a call one day from a friend that needed a system which can handle peoples reports on various problems like kitchen problems, water problems etc and I decided to make a system for it. Little did I know that it would totally revolutionise my own project and that it would teach me much needed jquery skills to further enhance the CMS. I also