JSFiddle - React, Tailwind, and code Playground

by bschafer

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<h1>Kendo Editor App</h1>
Kendo Resources added<br />
jQuery nowrap body
<hr />
<textarea class="editor" style="width: 90%;">
        Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.&lt;br /&gt;
        In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
        and image handling. The widget &lt;strong&gt;outputs identical HTML&lt;/strong&gt; across all major browsers, follows
        accessibility standards and provides API for content manipulation.
</textarea>
<br />
<textarea class="editor" style="width: 90%;">
        Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.&lt;br /&gt;
        In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
        and image handling. The widget &lt;strong&gt;outputs identical HTML&lt;/strong&gt; across all major browsers, follows
        accessibility standards and provides API for content manipulation.
</textarea>

CSS

body {
    margin: 5px;
    font-family: Arial;
    font-size: 0.8em;
}
h1 {
    font-size: 1.2em;
    font-weight: Bold;
    margin-bottom: 5px;
}

JavaScript

function KendoEditorKeyUp(element) {
    var h = $(element).height();
    alert(h);
    $(element).height(h + 20);
}

$(document).ready(function() {
    // create Editor from textarea HTML element with default set of tools
    $(".editor").each(function() {
        var _editor = $(this).kendoEditor().data("kendoEditor");
        _editor.document.documentElement.style.overflow = "hidden";
        $(_editor.body).on("keyup", function(e) {
            alert(e.data);
            KendoEditorKeyUp($(this));
        });
    });
});