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 from Telerik</h1>
Resources added<br />
jQuery nowrap body
<hr />
<textarea id="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

var editor;
    
$(document).ready(function() {
    // create Editor from textarea HTML element with default set of tools
    editor = $("#editor").kendoEditor().data("kendoEditor");
    editor.document.documentElement.style.overflow = "hidden";
    
    
    $(editor.body).on("keyup", function(e) {
        var editableArea = $(".k-widget.k-editor").find(".k-editable-area"),
            editableHeight = editableArea.outerHeight(),
            documentHeight = editor.document.documentElement.scrollHeight,
            heightDiff = documentHeight - editableHeight;

        if((heightDiff) > 0) {
            editableArea.css({
                height: editableHeight + heightDiff
            });
        }
    })
});