Documentation / Settings

Click-to-edit

clickToSave #

clickToSave setting is an integral part of Click-to-Edit mode (along with clickToCancel setting and Save and Cancel callbacks) and doesn't work on its own. This setting defines an ID of HTML element, that would work as a "Save" button in Click-to-Edit mode.

$('#redactor').redactor({
    clickToEdit: true,
    clickToSave: '#btn-save',
    clickToCancel: '#btn-cancel',
    callbacks: {
	    save: function(html)
        {
            console.log('save', html);
        },
        cancel: function(html)
        {
            console.log('cancel', html);
        }
    }
});

clickToEdit #

This setting makes it possible to create a smooth editing experience, allowing users to simply click on an area to invoke Redactor. It is required that Redactor is being initialized over a div and not over a textarea.

This mode also requires use of two buttons, Save and Cancel, and corresponding callbacks, Save and Cancel. Both buttons should be initialized in Click-to-Edit settings along with the callbacks:

$('#redactor').redactor({
    clickToEdit: true,
    clickToCancel: '#btn-cancel',
    clickToSave: '#btn-save',
    callbacks: {
	    save: function(html)
        {
            console.log('save', html);
        },
        cancel: function(html)
        {
            console.log('cancel', html);
        }
    }
});	

Here's what buttons' HTML code may look like. Please, pay attention to button's IDs: btn-save and btn-cancel:

<button id="btn-save" style="display: none;">Save </button>
<button id="btn-cancel" style="display: none;">Cancel </button>

clickToCancel #

clickToCancel setting is an integral part of Click-to-Edit mode (along with clickToSave setting and Save and Cancel callbacks) and doesn't work on its own. This setting defines an ID of HTML element, that would work as a "Cancel" button in Click-to-Edit mode.

$('#redactor').redactor({
    clickToEdit: true,
    clickToSave: '#btn-save',
    clickToCancel: '#btn-cancel',
    callbacks: {
	    save: function(html)
        {
            console.log('save', html);
        },
        cancel: function(html)
        {
            console.log('cancel', html);
        }
    }
});