Question

I’m trying to modify redactor‘s image_edit and image_save methods to add some functionality.

I’m just wrapping te existing img element with a div and add another one with a text. When I press the save button in the modal and look at the source in redactor, it appears OK, but when I save the changes, redactor cuts off both divs and leaves only the original img element and desc value from the form. How can I resolve this?

Original code:

$(el).attr('alt', $('#redactor_file_alt').val());

var floating = $('#redactor_form_image_align').val();

if (floating == 'left') $(el).css({ 'float': 'left', margin: '0 10px 10px 0' });
else if (floating == 'right') $(el).css({ 'float': 'right', margin: '0 0 10px 10px' });
else $(el).css({ 'float': 'none', margin: '0' });

this.modalClose();

My code:

$(el).attr('alt', $('#redactor_file_alt').val());

var floating = $('#redactor_form_image_align').val();

if (floating == 'left') {
    var align = 'left-image';
} else if (floating == 'right') {
    var align = 'right-image';
} else {
    var align = 'ci-image';
}

var imgDiv = $('<div class="' + align + '" />');
$(el).wrap(imgDiv);

if($('#image_desc').val()) {
    $(el).after($('<div class="descr" />').html($('#image_desc').val()));
}

Answer 1

You should specify in the settings { removeClasses: false }