kendo编辑器：防止keydown不工作

Question

如果kendo编辑器主体有一定高度（以限制编辑器字段的最大高度），我想阻止按下ENTER键。但我的尝试都没有奏效。

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