Image Crop for CKEditor

Frequently Asked Questions

It doesn’t work

We need a better explanation of the problem: Do you have any error message?, does it not work correctly? What browser version and OS are you using? Please send a mail to info@uritec.es explaining the problem

My browser is Explorer 8, 9 or 10

These browsers version are not supported by ImageCrop. In order to use ImageCrop you must upgrade your Internet Explorer to version 11, or use Chrome o Firefox.

Using the latest Chrome version, I cannot paste/drag images into the editor

If you cannot paste/drag images into the editor using Chrome and using Firefox or Explorer the images are added with src="base64 ....", then SimpleUploads plugin is not installed correctly.

I do not see the "Add Image" button

This indicates that the SimpleUploads component is not installed correctly. Please check that you have set in your editor the filebrowserUploadUrl parameter.

How do I configure the filebrowserUploadUrl parameter?

This is the parameter that tells the editor which script must be used to manage the images that users add to the editor. Your editor setup needs a line like the following:

 config.filebrowserUploadUrl= '/uploader/upload.php?type=Files';

You can see a basic example of this script here. You can download various examples of scripts in various languages from GitHub repository to match your website.

This guide will tell you step by step how to configure file uploads in CKEditor

If I copy or drag an image from another website nothing happens

ImageCrop can only work with images that:

  • are hosted on your own server
  • the user add from his computer

ImageCrop needs that images dragged from another server, are copied to your server. Only then ImageCrop can work with them to crop and save them. If you need a plugin to copy images from any website to your server, write to soporte@uritec.es.

Is it possible to integrate it with other plugins?

If you have other plugins that are using the standard functions of CKEditor to upload files in a dialog, ImageCrop can detect automatically those uploads and prompt the user to scale the image before it's sent to the server. This integration is based on the functionality of SimpleUploads; it's enough to define in the dialog a QuickUpload field, and you can also add a property requiresImage: true in order to restrict the file picker to allow only images:

{
    type : 'fileButton',
    id : 'uploadButton',
    filebrowser :
    {
    action : 'QuickUpload',
    target: 'info:txtUrl',
    url : editor.config.filebrowserImageUploadUrl || editor.config.filebrowserUploadUrl,
    requiresImage : true
    },
    label : lang.uploadImage,
    'for' : [ 'info', 'upload' ],
    hidden : true
}