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