Information SecurityMobileOnline SecuritySoftwareWeb Development

How to Add and Upload an Image using CKEditor

By October 28, 2010 August 4th, 2013 44 Comments

If you’ve not heard of CKEditor, it’s a free and open-source rich text HTML editor for use on websites such as this one. In fact, I’m typing into a CKEditor text box right now as I write this article via our administration back-end of the web site. It’s useful for Content Management Systems, Blogs, or anywhere else where you need you users to be able to enter rich text and change styles such as font, size and colour but without the need for technical expertise. Even for those of us who are happy using HTML, it is still a far more elegant and professional-looking way of entering content into a site.

CKEditor, and FCKEditor which came before it, are both great pieces of (did I mention it’s free?!) software. However, compliments dispensed with it’s time for a criticism: the documentation isn’t wonderful. It’s better than it used to be and is getting better all the time, but it’s still not perfect so you may struggle finding out how to add and upload images.

If you’ve stumbled upon this article then you probably want to know how to set up CKEditor to allow you to add images into documents that you publish to your web site’s Content Management System, Blog or other area with user-generated content. And not only how to insert images, but how to upload them to your web site’s server too. Like all things, it’s easy when you know how but until you have those little bits of essential information, it can be a bit of a minefield.

This guide is for PHP users and was originally written for the then-latest version of CKEditor as of October 2010 which was 3.4.1. It has since been updated (in September 2010) for version 3.6.1 to take into account some changes made to CKEditor – these are highlighted in red. Naturally, some parts of it may have changed since then with updates, etc. so if this doesn’t work for you then just leave a comment below and I’ll update the article if I need to. I’m assuming that you already have CKEditor set up and working on your web site. If you haven’t, then you need to do that first!

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

1288278954_upload_image

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; 

Update: in later versions of CKEditor, this may have changed to filebrowserImageBrowseLinkUrl so if you can’t find the value listed above, try searching for that instead.

Next, 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.

Note: depending on your server’s setup you may need to provide the full, absolute URL to your PHP script. A relative URL like in the example above is preferable as you will be able to move your web app from one server to another with less headaches, so try that first but if it doesn’t work then just use the full URL.

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 = @ move_uploaded_file($_FILES[‘upload’][‘tmp_name’], $url);
      if(!$move)
      {
         $message = “Error moving uploaded file. Check the script is granted Read/Write/Modify permissions.”;
      }
      $url = “../” . $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.
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.

Step 5: Grant Correct File Permissions to your PHP Script

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). Also, double-check that the directory you’re telling PHP to move your images to does actually exist on your web server.

Conclusion

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!
Paul Freeman-Powell

Paul Freeman-Powell

Paul (@paulfp) is the main presenter of the award-winning Switched On Network YouTube Channel, which covers a variety of interesting topics usually relating to his love of technology and all things geeky. He also founded and runs Innobella Media, where he leads in all aspects of video production, video editing, sound & lighting. A father of 3 children including twins, his hobbies used to include photography, playing the drums and cycling. With a degree in Modern European Languages, Paul speaks French, Spanish and a little bit of Italian, and holds dual British & Irish citizenship.

44 Comments

  • Alex says:

    Nice work!!
    The best tutorial for CKeditor upload image!

  • Panna says:

    Its very easy to understand and follow in a single shot.
    Really awesome.

  • Aline says:

    Thank you very much, perfect with CodeIgniter.

  • Rajendra says:

    The above article helped me a lot. Paul, many many thanks from my bottom or heart.

  • Nguyen K Ng says:

    I got a problem. Is there any constraint on the image size? Because when I try to upload some images with sizes are around 5 MB, I keep receiving this error message “The file is of zero length.” Any help please? Thanks.

    • Nguyen K Ng says:

      Oh never mind, I found the problem. It was because of the file upload limitation of PHP, I changed it to 10MB and things are fine now.

  • Abid Shahzad says:

    I have implemented this but failed. It returns with object not found when I clink on send it to server button.

  • elia says:

    i can’t find config.filebrowserBrowseUrl in image.js – using ckeditor 4.2.2.. 🙁

  • Guest says:

    same proplem as abid any help!,and “browse server” button not function how can i figure it out!

  • tabelltz says:

    same proplem as abid any help plz!,and “browse server” button not function how can i figure it out!

  • Anu says:

    Perfect code! working without any error.

  • Vineet Yadav says:

    this is the best article, that solved my problem after hours of struggle
    Thanks a alot

  • Lucky says:

    Where should i make images/upload structure?

  • webbeur says:

    “Not Found” every time I upload a picture, need help with config.filebrowseruploadurl

  • Sundar Rajan says:

    I am getting the below error plz help me out

  • Sundar Rajan says:

    I am getting the below error please help me out

  • Babu Mj says:

    When i use the ckeditor for upload image click on the send to server button always i get the error given below: “Error moving uploaded file. Check the script is granted Read/Write/Modify permissions.” What i do for solve this problem?

  • tz says:

    use this and dont start with first “/” in your url hope will help!
    $url = ‘images/uploads/’.time().”_”.$_FILES[‘upload’][‘name’];

  • CC says:

    I have followed the tutorial and the Upload tab appears. I click Browse, select an image, and click OK, then I receive an error that states: “Image source URL is missing.”

    Please advise and thanks in advance for help!

  • Santha Kumar says:

    i have error with link what to do? the error is “image source URL is missing”

  • Ed Smith says:

    Easy way to upload images for CKEditor + PHP/ASP.NET is DOKsoft Image Uploader: http://doksoft.com/soft/ckutils/index.html

  • Mike says:

    Easy to follow and install. Worked like a charm, thanks!

  • Sujata says:

    I always get “Error moving uploaded file. Check the script is granted Read/Write/Modify permissions.”. My all file and folder permissions are correct.

  • Thanks for posting this. The documentation says nothing about what CK is sending to your script. I really wish some of the documentation was better. I think they don’t want to tell you much about the file and image uploading because they want you to use CKFinder, I needed a custom solution. I was really wondering what the CK script was sending to my upload scripts.

    CKEditor is awesome, just some of the documentation really leaves you scratching your head.

  • It is hard to follow along with the Documentation, it is not very straight forward and parts and pieces are in different areas. I’ve been trying to figure out the code to just simply upload an image. It is almost like they made image uploading overly complicated. Why not just let my script upload the image and return an image tag? What is up with the anonymous function and having to return javascript etc.?

  • mohtashim says:

    Done the changes and now working fine, but only issue is with the cake php URL structure, at few page the uploaded images are displaying but at few other page, it is not displaying and I need to change the URL from ../img/ to ../../img/

    Can any one please help??

  • Anvesh says:

    Hi
    I have added ‘autogrow’ and ‘uploadimage’ plugins in ckeditor. I was unable to paste image if the ckeditor is in autogrow mode. It is working fine if I remove autogrow.

    Can any one please help??

  • Ghani says:

    Thankyou very much
    Had to change some URLs, but really works!

  • kusmadi says:

    this is part of my ckeditor ni was set a.config.filebrowserUploadUrl = ‘../ckupload.php’
    not working, help me out
    I replace with new ckeditor, there is gone so i replace back

    note: ckeditor 4.4.1 revision 568b5ed

    thank

    function j(a, c, d, b) {
    if (b && b.length)
    for (var e, g = b.length; g–;)
    if (e = b[g], (“hbox” == e.type || “vbox” == e.type || “fieldset” == e.type) && j(a, c, d, e.children), e.filebrowser)
    if (“string” == typeof e.filebrowser && (e.filebrowser = {
    action: “fileButton” == e.type ? “QuickUpload” : “Browse”
    , target: e.filebrowser
    }), “Browse” == e.filebrowser.action) {
    var f = e.filebrowser.url;
    void 0 === f && (f = a.config[“filebrowser” +
    i(c) + “BrowseUrl”], void 0 === f && (f = a.config.filebrowserBrowseUrl));
    f && (e.onClick = k, e.filebrowser.url = f, e.hidden = !1)
    } else if (“QuickUpload” == e.filebrowser.action && e[“for”] && (f = e.filebrowser.url, void 0 === f && (f = a.config[“filebrowser” + i(c) + “UploadUrl”], void 0 === f && (a.config.filebrowserUploadUrl = f)), f)) {
    var h = e.onClick;
    e.onClick = function (a) {
    var b = a.sender;
    return h && h.call(b, a) === false ? false : l.call(b, a)
    };
    e.filebrowser.url = f;
    e.hidden = !1;
    m(a, d.getContents(e[“for”][0]).get(e[“for”][1]), e.filebrowser)
    }
    }

  • kuba says:

    I have a problem with step 1. Where are my “toolbar options”? What is this?

  • jd says:

    copy and paste image not save normal format. I want to copy paste image stored normal format. copy paste image automatically upload to server and assign file name for the image . plz tell me any idea.

  • Yashmeet Singh says:

    Thank you so much for this! I needed to build CKEditor image upload functionality with Java backend. I spent countless hours on CKEditor official documentation to find out how to pass back URL of the uploaded file. Eventually found the answer here.

  • Yoel Sharf says:

    I placed a very straightforward and working example of CKEditor integration with Cloudinary through js here: https://github.com/yoelsharf/ckeditor-cloudinary

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.