kendo编辑器:防止keydown不工作
问题描述:
如果kendo编辑器主体有一定高度(以限制编辑器字段的最大高度),我想阻止按下ENTER键。但我的尝试都没有奏效。kendo编辑器:防止keydown不工作
<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.
}
}
};
答
我已经设法找到两种解决方案。一个是肮脏的黑客和其他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();
}
你好,你的第一个解决方案是我绝对精品! (第二种方法不太可行。)你真的赢得了声誉! – AGuyCalledGerald
@AGuyCalledGerald很高兴这有助于,谢谢! –
@AGuyCalledGerald我发现了另一种更有效的解决方案。在答案的最后检查更新。不幸的是,我现在没有时间去尝试并做出完整的示例。 –