kendo 编辑器：防止 keydown 不起作用

Question

如果 kendo 编辑器正文具有特定高度（以限制编辑器字段的最大高度），我想阻止按下 ENTER。但是 none 我的尝试成功了。

<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

我找到了两个解决方案。一个是肮脏的黑客，另一个不符合您的要求 100%。但是两者都或多或少地执行了所需的操作。

新段落是通过嵌入式编辑器 insertParagraph 命令添加的，该命令会覆盖默认的按键逻辑。所以第一个解决方案是使用 keydown 和 keyup 事件临时覆盖此命令，如下所示：

<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);

这很好用，但看起来有点丑。

其他解决方案是在需要时执行编辑器撤消命令。也可以，但是空行总是闪一下：

<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：我找到了更好的解决方案。您可以使用 execute 事件，请参阅 http://docs.telerik.com/kendo-ui/api/javascript/ui/editor#events-execute

然后检查条件并按命令名称过滤以取消插入新段落：

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

kendo 编辑器：防止 keydown 不起作用

kendo editor: prevent keydown not working

kendo-ui

editor

onkeydown