解决kindeditor中onkeydown不执行的问题

    jwolf 
1783  0  0   2016-1-29 9:54


最近一个测试的项目使用kindeditor作为前端的编辑器,需求需要当kindeditor生成内容编辑器(比如<input> ,<textarea>标签)得到焦点时,外部使用:

document.onkeydown = function(){...
}

这样绑定的键盘时间会调用不成功,因为kindeditor 生成的html中使用了iframe, iframe中有另外的一个document,使得外部的键盘事件绑定不生效,后续查看kindeditor的api发现,在事件中有这样的描述:

K.ctrl(el , key, fn)

将指定函数绑定到ctrl + [key]组合键事件上。


    • element el: DOM元素

    • int|string key: 键名

    • function fn: 回调函数

    • 参数:


  • 返回: 无


于是在代码中使用:

K.create('.jwolf_input_content', {
    ...//一堆无关的设置
    afterCreate : function() {
        var self = this;
        K.ctrl(self.edit.doc, 13, function() {
            self.sync();
            //继续我的enter事件
        });

    });

这样虽然可以捕捉到键盘的行为了,但是始终是必须加了ctrl 键,心里甚是不满 继续深入研究后发现

self.edit.doc

这个是html原生的dom,既然是dom , 就直接用jquery在这再绑定键盘事件:

K.create('.jwolf_input_content', {
    ...//一堆无关的设置
    afterCreate : function() {
        var self = this;
        $(self.edit.doc).bind("keydown", 13, function(e) {
            e.preventDefault();
            self.sync();
            //继续我的enter事件
        });

    });

这样,当焦点还在这个输入的容器中时,只按enter也能激活我的事件。

但是,容器中输入需要换行的时候,由于上面的默认enter换行被我截掉了,所以按enter不行了,使用qq聊天的时候,大家都知道,使用shift+enter是可以换行的,这里我用ctrl+enter换行吧,这样可以直接用kindeditor 中的api,于是才有了最终版

K.create('.jwolf_input_content', {
    //无关的一堆,呃,上面说了
    afterCreate : function() {
        var self = this;
        $(self.edit.doc).bind("keydown",function (event) {
            if (!event.ctrlKey&&event.keyCode == 13) {
                event.preventDefault();
                self.sync();
                sendMsg();
            }
        });
        K.ctrl(self.edit.doc, 13, function() {
            self.sync();
            var t = K(self.edit.doc).val();
            K(self.edit.doc).val(t+'\n');
        });

    }
});