Image

imageUpload

Type: Boolean String Function

Default: false

1) URL path to an upload script

Sets URL path to the image upload script.

$R('#content', {
    imageUpload: '/myadmin/images/upload/'
});

Image file will be transmitted in FILES array, for example, in PHP:

$_FILES['file']

By default, variable name is file, but this can be changed using the imageUploadParam setting.

Image script must return a JSON string in following format in order for an image to be inserted into Redactor:

{
    filekey: {
        "url": "/images/img.jpg",
         "id": "1"
    }
}

In PHP, such string can be created like this:

$files = [];
$files['filekey'] = [
    'url' => '/tmp/images/img.jpg',
    'id' => 1
];

echo stripslashes(json_encode($files));

2) Custom function

The second way to use imageUpload setting is a custom function. If you set the function, the upload process is in your hands.

$R('#content', {
    imageUpload: function(formData, files, event)
    {
        // ... your process for uploading an image ...
        //  in the end, you must return JSON or a string with the image URL
        // return json;
        // or
        // return '/images/my-image.jpg';
    }
});

The custom function gets the following arguments:

• formData - FormData object with all data to upload
• files - FileList array is files only
• event - Triggered event if image uploaded with drag and drop

imageUploadParam

Type: String

Default: file

This setting allows to change default name ('file') for imageUpload option.

$R('#content', {
    imageUpload: '/myadmin/images/upload/',
    imageUploadParam: 'my-name'
});

In this example, imageUpload variable name will be my-name and it can be retrieved like this (in PHP):

$_FILES['my-name']

imageData

Type: Object Boolean

Default: false

This setting allows you to send POST params to your upload script.

$R('#content', {
    imageUpload: '/myadmin/images/upload/',
    imageData: {
        id: 10,
        elements: '#my-input-1, #my-input-2, #my-form'
    }
});

The example above shows how to send POST params with uploading an image. The data object has key=value params, including values in the input and form fields if the additional object has key elements with field and form selectors.

The values of the input and form fields are appended as values: field-name: value.

imageFigure

Type: Boolean

Default: true

By default Redactor wraps all the images in the figure tag, you can turn it off and get the output code without the figure tags around the images.

$R('#content', {
    imageFigure: false
});

Note: if figure contains a figcaption tag, it will not be deleted even the setting is turned off.

imageEditable

Type: Boolean

Default: true

This setting allows you to edit the image by click on it. You can turn off the image editing:

$R('#content', {
    imageUpload: '/myadmin/images/upload/',
    imageEditable: false
});

imageLink

Type: Boolean

Default: true

This setting allows you to turn image's link on or off. When turned on, this setting will display "Link" field in image editing modal window.

$R('#content', {
    imageUpload: '/myadmin/images/upload/',
    imageLink: false
});

imageCaption

Type: Boolean

Default: true

This setting allows you to turn captions on or off. When turned on, this setting will display "Caption" field in image editing modal window and user will be able to add text inside of image's figcaption tag.

$R('#content', {
    imageUpload: '/myadmin/images/upload/',
    imageCaption: false
});

imagePosition

Type: Boolean Object

Default: false

This setting allows to set image position (float alignment) in relation to the text when you are editing the image.

$R('#content', {
    imageUpload: '/myadmin/images/upload/',
    imagePosition: true
});

The setting can get the object with float classes (these classes will be set for the image, instead of the style attribute), for example:

$R('#content', {
    imageUpload: '/myadmin/images/upload/',
    imagePosition : {
        "left": "image-left",
        "right": "image-right",
        "center": "image-center"
    }
});

And the class in your CSS might look like this:

figure.image-left {
    float: left;
}

imageFloatMargin

Type: String

Default: 10px

This setting changes margins for image float alignment.

$R('#content', {
    imageUpload: '/myadmin/images/upload/',
    imagePosition: true,
    imageFloatMargin: '20px'
});

imageResizable

Type: Boolean

Default: false

This setting turns on or off the manual image resizing.

$R('#content', {
    imageUpload: '/myadmin/images/upload/',
    imageResizable: true
});

imageObserve

Type: Boolean

Default: true

This setting turns on or off adding the data-image attribute to images. This attribute is added to track deleted images from content using the Storage API.

$R('#content', {
    imageObserve: false
});