Documentation
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);
}
}
});