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:

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

When uploading an image, the Article Editor 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:

ArticleEditor('#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, Article is enabled to insert images by url in the add image popup.

This can be disabled, like this:

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

select #

Type: String, Boolean

Default: false

The Article Editor 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.

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

JSON should be like this:

[
    {
        "thumb": "/images/image-thumbnail-1.jpg",
        "url": "/images/image-1.jpg",
        "id": "1",
        "title": "My Image 1"
    },
    {
        "thumb": "/images/image-thumbnail-2.jpg",
        "url": "/images/image-2.jpg",
        "id": "2",
        "title": "My Image 2"
    }
]

The title parameter is optional.

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:

ArticleEditor('#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:

ArticleEditor('#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.

ArticleEditor('#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 autosaving. 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.

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

multiple #

Type: Boolean

Default: true

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

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