关于CKEDITOR通过javascript添加键盘事件

对于CKEDITOR添加键盘事件，以keydown事件为例：

一般情况下，我们给某个元素添加某些事件绑定时都会等待元素加载完成之后才会实施，这时候通常调用的window.onload方法，对于这个方法的详细使用就不在这里作说明，各位去百度、google都可以看到更详细的说明甚至例子。下面进入正题：

首先我们要知道，CKEDITOR对象的获取和一般元素的获取是有差别的：

一般元素的获取可以通过id，标签名，类名等属性去获取，例如：

$("#element_id")

而CKEDITOR的对象获取，确实采用CKEDITOR自己（我认为）的获取方式：

CKEDITOR.instances.your_ckeditor_name

上面的获取方式中“your_ckeditor_name”一般的组成部分是（在rails中）你的对象名称和对象对应的属性名称的联合，例如

@obj = ModuleName.new （其中ModuleName包含content属性）

假如表单写法如下：

=simple_form_for (@obj......

    cke_input...  :content

那么在获取该CKEDITO对象的时候就如下写法：

CKEDITOR.instances.obj_content

上面讲完CKEDITOR对象的获取工作之后，下面来讲讲CKEDITOR的加载事件（类似 与window.onload)，为什么要讲这个呢？那是因为CKEDITOR在页面加载时，如果单纯的是在window.onload方法中去获取其对象是没有用的，可能是它自己需要做额外的加载吧，具体细节没有研究过，有谁清楚的可以给我留言哈。

错误的加载事件方法如下：

window.onload = function(){

  ck = CKEDITOR.instances.obj_content;

}

正确的写法应该是：

CKEDITOR.on("instanceReady", function(){})

讲完它的加载方法后，我们就来进行事件绑定的操作吧。

比如项目要求如下，对CKEDITOR中的文字进行选择后，按键盘的某个键后，将该选择的内容写入到特定的文本框中，实现如下：

CKEDITOR.on("instanceReady", function(e){

  CKEDITOR.instances.obj_content.document.$.body.onkeydown = function(e) {

     console.log(e.keyCode) //可以用来监测你的按键

     ..........

  }

}

上面的代码只实现了CKEDITOR的javascript事件绑定，那么如果获取CKEDITOR中选择的文本内容呢，其实也不难，直接上代码：

CKEDITOR.instances.obj_content.window.$.getSelection().toString()

经测试，该代码在Firefox,Google Chrome下运行良好，那为什么没有IE呢？IE这东西，连微软都放弃，我还管它干嘛，是吧？其实吧，是我的系统上没有IE，至于什么系统没有IE，各位自己百度吧。

文章到这里基本也写完了，下面题外话，说下对一般的文本框中的选择文字的获取方式，这个可以会分浏览器的哟！

首先是Google Chrome下面：

select_text = window.getSelection().toString()

其次是Firefox下面：

var your_input_element = $("#input_element_id")  //使用的是jquery获取

var start_position = your_input_element.get(0).selectionStart

var end_position   = your_input_element.get(0).selectionEnd

select_text  = your_input_element.val().substring(start_position, end_position)

至于IE下面如何，没写过，应该和Firefox一样的。

好了，这个就写到这吧，如果以上有什么问题，欢迎各位看官指出，给我留言就行。