$("#editor").kendoEditor({
tools: [
"formatting", "foreColor", "bold", "italic", "underline", "strikethrough",
"justifyLeft", "justifyCenter", "justifyRight", "justifyFull",
"insertUnorderedList", "insertOrderedList", "indent", "outdent",
"createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn",
"createLink", "unlink", "insertImage",
{
name: 'clearformatting',
tooltip: 'Clear formatting',
exec: function(e) {
var editor = jQuery(this).data('kendoEditor'),
selectedTools = editor.toolbar.element.find('a.k-state-selected'),
stateBefore;
// deselect all active buttons
selectedTools.each(function () {
jQuery(this).trigger('click');
});
// keep history before call exec
stateBefore = editor.undoRedoStack.stack;
editor.exec('foreColor', { value: '' });
editor.exec('backColor', { value: '' });
editor.exec('fontSize', { value: '' });
editor.exec('fontName', { value: '' });
//editor.exec('formatBlock', { value:'p' });
// set history state
editor.undoRedoStack.stack = stateBefore;
editor.undoRedoStack.currentCommandIndex = stateBefore.length - 1;
// clear selection
setTimeout(function () {
editor.getSelection().collapseToEnd();
}, 1);
}
}
]
});
<textarea id="editor"><h1>Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.</h1><p>In this version, the <strong><span style="color:#ff0000;">Editor provides</span></strong> the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards and provides API for content manipulation. </p></textarea>
body{
font: 12px/1.4 arial;
}
.k-clearformatting,
.k-clearformatting.k-state-hover{
background-image: url(http://4.bp.blogspot.com/-Fg-fnico1ao/UpQ1qNnSkmI/AAAAAAAABL0/A240S9TYrPM/s1600/icon_clearformat.png);
background-position: center center;
}
External resources loaded into this fiddle: