Click-to-Edit

clickToEdit

Type: Boolean

Default: false

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 can use of two buttons, Save and Cancel in the toolbar, and corresponding callbacks, clickSave and clickCancel. Both buttons should be initialized in Click-to-Edit settings along with the callbacks:

$R('#content', {
    clickToEdit: true,
    clickToSave: { title: 'Save' },
    clickToCancel: { title: 'Cancel' },
    callbacks:
    {
        clickSave: function(html)
        {
            console.log('save', html);
        },
        clickCancel: function(html)
        {
            console.log('cancel', html);
        }
    }
});

You can attach any icons (as HTML) to the buttons. Here is example:

clickToSave: { title: 'Save' , icon: '<i class="my-icon save"></i>' },
clickToCancel: { title: 'Cancel', icon: '<i class="my-icon cancel"></i>' },

Or you can place the external buttons on the page. 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">Save</button>
<button id="btn-cancel">Cancel</button>

And pass buttons IDs to options:

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

clickToSave

Type: Boolean String

Default: false

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

$R('#content', {
    clickToEdit: true,
    clickToSave: { title: 'Save' },
    clickToCancel: { title: 'Cancel' },
    callbacks:
    {
        clickSave: function(html)
        {
            console.log('save', html);
        },
        clickCancel: function(html)
        {
            console.log('cancel', html);
        }
    }
});

Attach the icon HTML to the button:

clickToSave: { title: 'Save' , icon: '<i class="my-icon save"></i>' },

Or set up the save button as external one on the page:

<button id="btn-save">Save</button>

And pass IDs to options:

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

clickToCancel

Type: Boolean String

Default: false

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

$R('#content', {
    clickToEdit: true,
    clickToSave: { title: 'Save' },
    clickToCancel: { title: 'Cancel' },
    callbacks: {
        clickSave: function(html)
        {
            console.log('save', html);
        },
        clickCancel: function(html)
        {
            console.log('cancel', html);
        }
    }
});

Attach the icon HTML to the button:

clickToCancel: { title: 'Cancel', icon: '<i class="my-icon cancel"></i>' },

Or set up the cancel button as external one on the page:

<button id="btn-cancel">Cancel</button>

And pass IDs to options:

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