kendo editor: prevent keydown not working

Question

I would like to prevent the pressing of ENTER if the kendo editor body has a certain height (to limit the max height of the editor field). But none of my tries worked.

<textarea data-role="editor"
          data-bind="events: { keydown: onEditorKeyDown }">
</textarea>

viewModel.onEditorKeyDown = function (e) {
            var key = e.keyCode;
            if (key == 13) {
                var editor = e.sender;
                var body = editor.body;
                var height = body.scrollHeight;
                if (height > 195) {
                    ?? //tried e.preventDefault(), return false etc.
                }
            }
        };

Answer 1

I've managed to find two solutions. One is dirty hack and other doesn't match your requirements 100%. But both perform what is needed more or less.

New paragraph is added via embedded editor insertParagraph command which overrides default keydown logic. So the first solution is to temporary override this command using keydown and keyup events like this:

<textarea data-role="editor" 
    data-bind="events: { keydown: onEditorKeyDown, keyup: onEditorKeyUp }">
</textarea>

// this should probably be moved to viewModel, it's here for demo puproses only
var savedCommand;
var viewModel = kendo.observable({
    html: null,
    isVisible: true,
    onChange: function() {
        kendoConsole.log("event :: change (" + kendo.htmlEncode(this.get("html")) + ")");
    }
});

viewModel.onEditorKeyDown = function (e) {
        var key = e.keyCode;
        if (key == 13) {
            var editor = e.sender;
            var body = editor.body;
            var height = body.scrollHeight;
            if (height > 195) {
                savedCommand = editor.toolbar.tools.insertParagraph.command;
                editor.toolbar.tools.insertParagraph.command = function() {};
            }
        }
    };

viewModel.onEditorKeyUp = function (e) {
        var key = e.keyCode;
        if (key == 13) {
            if (savedCommand) {
                var editor = e.sender;
                editor.toolbar.tools.insertParagraph.command = savedCommand;
                savedCommand = undefined;
            }
        }
    };

kendo.bind($("#example"), viewModel);

This works fine, but looks a bit ugly.

Other solution is to execute editor undo command if needed. It works too, but empty line always flickers for a moment:

<textarea data-role="editor"
    data-bind="events: { keyup: onEditorKeyUp }"></textarea>

var viewModel = kendo.observable({
    html: null,
    isVisible: true,
    onChange: function() {
        kendoConsole.log("event :: change (" + kendo.htmlEncode(this.get("html")) + ")");
    }
});

viewModel.onEditorKeyUp = function (e) {
        var key = e.keyCode;
        if (key == 13) {
            var editor = e.sender;
            var body = editor.body;
            while (body.scrollHeight > 195) {
                editor.exec('undo');
            }
        }
    };

kendo.bind($("#example"), viewModel);

UPD: I've found event better solution. You can use execute event, see http://docs.telerik.com/kendo-ui/api/javascript/ui/editor#events-execute

Then check conditions and filter by command name to cancel insert of new paragraph:

execute: function(e) {
  alert(e.name);
  e.preventDefault();
}