Redactor / Documentation / Callbacks

Image

imageUpload #

This callback is triggered on successful image upload (including via drag and drop)

Arguments:

  • image – DOM element of successfully uploaded and inserted image
  • json – JSON object with data from upload script

Example:

$('#redactor').redactor({
    callbacks: {
        imageUpload: function(image, json)
        {
             $(image).attr('id', json.id);
        }
    }   
});

Upload script forms a JSON string:

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

JSON may contain any data, however, url and id are required.

imageUploadError #

This callback is triggered whenever image upload results in error. This callback works for both standard server uploads and Amazon S3 uploads and returns two arguments: json and xhr.

JSON object with data from upload script is returned with a standard upload.

For this callback to trigger properly, your upload script should return a JSON string with error parameter, for example (in PHP):

<?php
    $array = array(
        'error' => true,
        'message' => 'Something went wrong...'
    );

    echo stripslashes(json_encode($array));
?>

As a result, imageUploadError callback will be triggered and you’ll be able to display appropriate message to the user:

$('#content').redactor({
    callbacks: {
        imageUploadError: function(json, xhr)
        {
             alert(json.message);
        }
    }   
});

XHR is an Amazon S3 request object that contains information about the response you get from S3 regarding your upload. For example, to access upload error codes, see xhr.status; Amazon S3 returns error codes according to HTTP protocol.

$('#content').redactor({
    callbacks: {
        imageUploadError: function(json, xhr)
        {
            if (xhr && xhr.status === 400)
            {
                console.log('Something went wrong!');
            }
        }
    }
});

imageDelete #

This callback allows you to prevent image deletion from the image edit modal window.

Arguments:

  • e — event object
  • image - DOM element of an image
$('#content').redactor({
    callbacks: {
        imageDelete: function(e, image)
        {
            if (some_condition)
            {
                // success
                return true;
            }
            else
            {
                // fail
                this.modal.close();
                return false;
            }
        }
    }
});

imageInserted #

This callback is triggered on image inserted when a user select image from Image Manager plugin.

Arguments:

  • image – DOM element of successfully inserted image

Example:

$('#redactor').redactor({
    callbacks: {
        imageInserted: function(image)
        {
             $(image).addClass('inserted');
        }
    }   
});