解决kindeditor中onkeydown不执行的问题
2019-07-23 16:59:40
554次阅读
0个评论
最后修改时间:2019-07-23 17:01:08
最近一个测试的项目使用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');
        });

    }
});

收藏 0 0

登录 后评论。没有帐号? 注册 一个。

admin

官方人员
  • 0 回答
  • 0 粉丝
  • 0 关注