2013-05-10 98 views
0

我希望能够抓住CKeditor中的图像对话框时,从URL文本输入字段获取onfocus事件。劫持CKeditor输入字段

我试着为元素(id#cke_75_textInput)添加一个事件处理程序,但它只在点击了Image按钮后才出现在DOM中。

查看了CKEditor 3 JavaScript API文档,在这里,我一直在挣扎,找不到我需要的东西。

这可以通过API来完成吗?

+0

您不会碰巧使用jQuery,对不对?它可以帮助将该事件与代表团进行绑定。基本的JavaScript将会有更多的问题,因为焦点事件冒泡问题 – Ian 2013-05-10 13:32:30

+2

看看[关于quirksmode的这篇小文章](http://www.quirksmode.org/blog/archives/2008/04/delegating_the .html)关于捕获'focus','change'和其他非冒泡事件。除非你可以使用jQuery,否则这将是我的建议。 – Kiruse 2013-05-10 13:34:05

+0

我正在使用jQuery。这是如何使它更容易? – Galadai 2013-05-10 14:30:27

回答

0

有没有必要做一些魔术焦点代表团(这是一个混乱,因为重点没有泡沫)。只需使用CKEditor API:

CKEDITOR.on('dialogDefinition', function(evt) { 
    if (evt.data.name == 'image') { 
     var def = evt.data.definition; 

     var onShow = def.onShow; 
     def.onShow = function() { 
      onShow && onShow.apply(this, arguments); 

      var input = this.getContentElement('info', 'txtUrl'); 
      console.log(input.getValue()); 
      input.on('focus', function() { 
       console.log('focused'); 
      }); 
     }; 
    } 
}); 

PS。 CKE4的文档比老CKE3的文档更少 - http://docs.ckeditor.com/#!/api/CKEDITOR.dialog

+0

这非常出色,但需要一些工作才能看到你从文档中得到了什么。 – Galadai 2013-05-11 17:35:59

+0

每个CKEditor包中都有一个[dialog API sample](http://ckeditor.com/latest/samples/plugins/dialog/dialog.html),[示例插件指南](http://docs.ckeditor.com/ #!/ guide/plugin_sdk_sample_1)以及我在答案中链接的API文档。它需要一些时间来编译所有这些,但所有这些都在官方文档中。我的答案中唯一棘手的部分是如何获取对话框实例。我重写了对话框定义的'onShow'方法,但我认为更简单的解决方案可能(或应该)存在。 – Reinmar 2013-05-11 18:30:26