CLEditor Auto Grow Example

CLEditor Auto Grow Example

Click this link for live example of cleditor auto grow

Download required files for cleditor auto grow from this link

Very first position of cleditor:

After grow (change of content) of cleditor:

$(document).ready(function () {
    var panel = $(document.body).find(".editor-container");

    //https://premiumsoftware.net/cleditor/gettingstarted
    panel.find(".editor").cleditor().on("change", function () {
        this.$area.trigger("rich_editor_content_changed");
    });
    var iframe = panel.find("iframe"), iframe_body = iframe.contents().find("body");
    iframe.parent().css("height", "auto");
    iframe.attr("scrolling", "no");

    iframe.contents().find("body").bind("wheel", function(e, delta) {
        iframe.css("pointer-events", "none");
        clearTimeout($.data(this, 'mousewheel'));
        $.data(this, 'mousewheel', setTimeout(function() {
            iframe.css("pointer-events", "auto");
        }, 200));
    });

    panel.find(".cleditorMain").on('mousedown', function(e, delta) {
        iframe.css("pointer-events", "auto");
    });

    setTimeout(function () {
        panel.find("textarea").on("rich_editor_content_changed", function () {
            iframe.css("height", iframe_body.height() + 30);
        }).trigger("rich_editor_content_changed");
    }, 100);
});