Redactor Uploadcare plugin

This is Uploadcare plugin for Imperavi Redactor text editor. It will allow your users to upload files and images from local device, social networks, cloud storages without any backend code that is usually required to handle uploads.

Installation & configuration

1. Copy uploadcare.js to your plugins folder

2. Include plugin code on the page with Redactor:

   <script src="/js/redactor/redactor.js"></script>
    <!-- Plugin -->
   <script src="/js/redactor/plugins/uploadcare.js"></script>

3. Enable plugin for Redactor instance providing any Uploadcare widget settings you may want:

   <script type="text/javascript">
       $(function() {
           $('#redactor').redactor({
               plugins: ['uploadcare'],
               uploadcare: {
                   // see https://uploadcare.com/documentation/widget/#configuration
                   publicKey: 'demopublickey', // set your API key
                   crop: 'free',
                   tabs: 'all'
               }
           });
       });
   </script>

Required setting

There is only one - your public API key. You can get that by creating an account Uploadcare. You can use demo public key during dev stage, but note that demo account files are removed every few hours.

Useful settings

Locale.

Set widget locale. Should be set as global variable:

<script>
    UPLOADCARE_LOCALE = 'es';
</script>

Crop.

You can enable custom crop in the widget. After a user selects a file she will be able to crop it, according to your settings. Original file will be uploaded to your project, but additional crop operations will be included in resulting image URL.

Crop options is a string with one or more crop presets. Presets are divided by commas. When more than one preset is defined, user can pick any of them on crop step. Each preset consists of a size definition and optional keyword.

• "disabled" — crop is disabled. Can't be combined with other presets;
• "" or "free" — crop enabled and the user will be able to select any area on an image;
• "2:3" — user will be able to select an area with aspect ratio 2:3;
• "300x200" — same as previous, but if the selected area is bigger than 300x200, it will be scaled down to these dimensions;
• "300x200 upscale" — same as previous, but the selected area will be scaled even if it is smaller than the specified size;
• "300x200 minimum" — user will not be able to select an area smaller than 300x200. If uploaded image is smaller than 300x200 itself, it will be upscaled.

<script type="text/javascript">
    $(function() {
        $('#redactor').redactor({
            plugins: ['uploadcare'],
            uploadcare: {
                publicKey: 'yourapikey',
                crop: '4:3, 3:4'
            }
        });
    });
</script>

Tabs (Upload Sources)

The widget can upload files from disk, URLs, and many social sites. Each upload source has its own tab in the widget dialog.

A full list of tabs supported in the latest widget version (2.0.6) is provided below.

Code	File Source	Default
file	Local disk	On
camera	Local webcam	On
url	Any URL	On
facebook	Facebook	On
gdrive	Google Drive	On
dropbox	Dropbox	On
instagram	Instagram	On
evernote	Evernote	On
flickr	Flickr	On
skydrive	OneDrive	On
box	Box	Off
vk	VK	Off

The set can be reconfigured by specifying the ones you need in a space-separated value. Special value all can be used to enable all supported sources.

<script type="text/javascript">
    $(function() {
        $('#redactor').redactor({
            plugins: ['uploadcare'],
            uploadcare: {
                publicKey: 'yourapikey',
                tabs: 'file url instagram flickr'
            }
        });
    });
</script>

Other settings

All Uploadcare widget settings are too numerous to be listed here, please read Uploadcare widget documentation to unleash full uploading power.