Image

upload #

Type: String, Boolean

Default: false

By default, images upload are disabled in the editor. To enable it, specify the path to the server-side uploader, like this:

Redactor('#entry', {
    image: {
        upload: '/image-uploader/'
    }
});

When uploading an image, Redactor sends a POST request to the specified path on the server. Files are sent as an array of files and by default have the key file. For example, in PHP, this is the array $ _FILES ['file'].

The second way to upload images is a custom function. In this case, you need to specify your own function, create the response object in it and call complete. Here is the example of the editor settings with a custom function:

Redactor('#entry', {
    image: {
        upload: function(upload, data) {

            // loop files
            for (var key in data.files) {
                if (typeof data.files[key] === 'object') {
                    console.log(data.files[key])
                }
            }

            // create response
            var response = {
                "file": {
                    "url": "image-url.jpg",
                    "id": "some-id"
                }
            };

            // call complete
            upload.complete(response, data.e);
        }
    }
});

Here is a response object for inserting multiple images:

var response = {
    "file-1": {
        "url": "image-url-1.jpg",
        "id": "some-id"
    },
    "file-2": {
        "url": "image-url-2.jpg",
        "id": "some-id"
    }
};

See more how the image upload works.

url #

Type: Boolean

Default: true

By default, Redactor is enabled to insert images by url in the add image popup.

This can be disabled, like this:

Redactor('#entry', {
    image: {
        upload: '/image-uploader/',
        url: false
    }
});

select #

Type: String, Boolean, Object

Default: false

Redactor has the ability to specify already uploaded images that can be selected in the add image popup.

Specify the path to the JSON file with the image object.

Redactor('#entry', {
    image: {
        upload: '/image-uploader/',
        select: '/images/images.json'
    }
});

Or set the JSON object with images data:

Redactor('#entry', {
    image: {
        upload: '/image-uploader/',
        select: jsonObject
    }
});

JSON should be like this:

[
    {
        "thumb": "/images/image-thumbnail-1.jpg",
        "url": "/images/image-1.jpg",
        "id": "1",
        "alt": "My Image 1"
    },
    {
        "thumb": "/images/image-thumbnail-2.jpg",
        "url": "/images/image-2.jpg",
        "id": "2",
        "alt": "My Image 2",
        "caption": "My Caption",
        "link": "https://example.com",
        "width": "600",
        "height": "400"
    }
]

When id, alt, caption, link, width, and height parameters are optional.

selectMethod #

Type: String

Default: get

This setting sets the method to request a script or object for already uploaded images via the image.select setting.

Redactor('#entry', {
    image: {
        upload: '/image-uploader/',
        select: '/images/images.json',
        selectMethod: 'post'
    }
});

tag #

Type: String

Default: figure

By default the uploaded image is wrapped to figure tag. You can change the tag to p or div, like this:

Redactor('#entry', {
    image: {
        upload: '/image-uploader/',
        tag: 'p'
    }
});

name #

Type: String

Default: file

By default, the key of the file array sent to the server is file. This can be changed like this:

Redactor('#entry', {
    image: {
        upload: '/image-uploader/',
        name: 'image'
    }
});

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

$_FILES['image']

data #

Type: Object, Boolean

Default: false

When uploading images, it is possible to send additional parameters with the same POST request.

Redactor('#entry', {
    image: {
        upload: '/image-uploader/',
        data: {
            id: 10,
            elements: '#my-input-1, #my-input-2, #my-form'
        }
    }
});

The example above shows how to send POST params with uploading. 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.

drop #

Type: Boolean

Default: true

Turns off drag and drop image uploads.

Redactor('#entry', {
    image: {
        drop: false
    }
});

multiple #

Type: Boolean

Default: true

Redactor can accept multiple images simultaneously and upload them all to your server by default. You can turn it off:

Redactor('#entry', {
    image: {
        multiple: false
    }
});

states #

Type: Boolean

Default: true

By default, Redactor automatically adds the data-image attribute with the generated ID for all uploaded images. This is done to further track the deleted images when editing. This can be disabled.

Redactor('#entry', {
    image: {
        states: false
    }
});

types #

Type: Array

Default: ['image/*']

This setting allows you to specify what types of images you can upload.

Redator('#entry', {
    image: {
        types: ['image/png', 'image/jpeg']
    }
});

newtab #

Type: Boolean

Default: false

This setting allows you to enable the "open link in new tab" checkbox in the modal image editing popup.

Redactor('#entry', {
    image: {
        newtab: true
    }
});

link #

Type: Boolean

Default: true

This setting turns off adding a link in the modal image editing popup.

Redactor('#entry', {
    image: {
        link: false
    }
});

width #

Type: Boolean

Default: false

This setting turns on the input field for changing the width of the image in the editing popup.

Redactor('#entry', {
    image: {
        width: true
    }
});

create #

Type: Function

Default: false

This setting allows you to call a custom modal for inserting an image.

Redactor('#entry', {
    image: {
        create: function(app) {
            console.log('create image', app);

            ... call your function with your modal ...
        }
    }
});

edit #

Type: Function

Default: false

This setting allows you to call a custom modal when editing an image.

Redactor('#entry', {
    image: {
        edit: function(app, instance) {
            console.log('edit image', instance);

            ... call your function with your modal ...
        }
    }
});

wrapWithStyle #

Type: Boolean

Default: false

This setting enables the use of inline styles to center the image instead of CSS classes.

Redactor('#entry', {
    image: {
        wrapWithStyle: true
    }
});