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
});

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
});