JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<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>
CSS
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;
}
JavaScript
$("#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);
}
}
]
});