Redactor / Documentation / Settings

Images

imageUpload #

Sets URL path to the image upload script.

$('#redactor').redactor({
    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 imageUploadParam.

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

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

In PHP, such string can be created like this:

$array = array(
    'url' => '/tmp/images/img.jpg'
);

echo stripslashes(json_encode($array));

imageUploadParam #

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

$('#redactor').redactor({
    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']

dragImageUpload #

Set to 'true' by default.

Turns off drag and drop image uploads.

$('#redactor').redactor({
    dragImageUpload: false
});

imageUploadForms #

This setting allows to pass data from selected form along with an image on upload. This setting requires form's selector, for example, '#my-form', or multiple selectors, for example, '#my-form-1, #my-form-2', or a class '.my-form'

$('#redactor').redactor({
	imageUpload: 'http://site.com/upload/',
	imageUploadForms: '#my-form'
})

imageUploadFields #

This setting allows to pass data from selected fields with image uploads. This setting requires element field's selector, for example, '#my-field', or multiple selectors, for example, '#my-field-1, #my-field-2', or a class '.my-fileds'

$('#redactor').redactor({
	imageUpload: 'http://site.com/upload/',
	imageUploadFields: '#my-field'
})

clipboardImageUpload #

Redactor is able to accept images from clipboard and upload them to the server as any normally dropped image would; it is designed to let users quickly paste a screenshot into Redactor. This setting allows you to choose whether to allow clipboard uploads or not. At this time, this feature works in latest Firefox (Mac and Windows), Chrome (Mac and Windows) and Internet Explorer.

By default, clipboardImageUpload is set to true.

multipleImageUpload #

Redactor can accept multiple images simultaneously and upload them all to your server or to Amazon S3 (see Amazon S3 upload settings).

By default, this is set to true.

imageCaption #

Setting an image caption is a good practice. 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.

Set to true by default.

imageResizable #

Set false by default.

Turns on visual manual image resizing.

$('#redactor').redactor({
    imageResizable: true
});

imagePosition #

Set to false by default.

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

$('#redactor').redactor({ 
    imagePosition: true
});

imageFloatMargin #

Set to 10px by default.

This setting sets margins for image float alignment.

$('#redactor').redactor({
    imageFloatMargin: '20px'
});

imageTag #

Set to figure by default.

This setting allows to change the tag around image after uploading.

$('#redactor').redactor({
    imageTag: 'p'
});