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">
<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>

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({
                     alert(editableHeight);
                height: editableHeight + heightDiff;
            });
        }
        else if ((heightDiff) < 0) {
                 editableArea.css({
                     alert(editableHeight);
                 height: editableHeight + heightDiff;
                 });
                 }
    });
});