Image Crop for CKEditor

Introduction | Demo | Installation | Configuration | Price | Support | FAQ

Requirements

  • CKEditor 4. At the moment, the plugin is only supported for CKEditor 4.x; if you need a version for CKEditor 3, please, contact us so we can evaluate the feasibility of the adjustments
  • Image uploads already configured in CKEditor. Here is a tutorial to enable image uploads in CKEditor.
  • SimpleUploads plugin. Currently the plugin is built upon the features of the SimpleUploads plugin, so if you don't have it installed, please get it before purchasing this plugin.
    According to the CKEditor developers, some of those features will be available in a future version of CKEditor. When such version is released we will check the possibility to skip the SimpleUploads plugin.
  • Browser's: It requires to use browser's updated versions (IE10 and earlier are not supported) so you can drag & drop an image into the editor. The IE11 does not support the automatic rotation of the images made with the iPhone.
IE11 Chrome Firefox Possibilities

You can copy an image or part of it to your clipboard in a program like Photoshop, Paint.Net, etc... and then paste it into the contents using Ctrl+V

You can select a file in your desktop or file explorer and drag & drop it into the editor
   

You can select a file in your desktop, copy it to the clipboard (Ctrl+C) and then paste it into the editor using Ctrl+V

 

Installation (1/2): Copy the files

Extract the contents of the zip in you plugins directory, so it ends up like this:

ckeditor\
        ...
        images\
        lang\
        plugins\
               ...
               imagecrop\
                       plugin.js
                       dialog\
                       docs\
                       lang\
               ...
        skins\
        themes\

 

Installation (2/2): Add the plugin to CKEditor

Now add the plugin in your config.js or custom js configuration file, adding a line like the following one:

config.extraPlugins='simpleuploads,imagecrop';

If desired, you can see other options to add the plugin to CKEditor.