CKEditor无法验证的解决方案js验证+jQuery Validate验证

最近项目的前端使用了jQuery，表单的前端验证用的是jQuery Validate，用起来很简单方便，一直都很满意的。

前段时间，根据需求为表单中的 textarea 类型的元素加上了html富文本编辑器，用的是CKEditor，功能强大，定制方便，也很满意。

不过用CKEditor增强过的 textarea 元素，这个字段要求是非空的，在jQuery Validate总是验证不通过，原因就是在 CKEditor 编辑器填写了内容之后，编辑器并不是立即把内容更新到原来的 textarea 元素中的，我没仔细看源代码，试过一种情况就是每一次提交不通过，第二次提交就可以通过的，貌似编辑器是在 submit 事件之前把编辑器的内容更新到 textarea 中的（这个是猜测，不知道对不对，我对jQuery 和 CKEditor 都不太熟悉，算是拿来就用，有问题就放狗的那种）。

于是在网上找到了解决问题的代码，代码不是我写的，我只是记录一下我遇到的问题，代码非原创。原理就是当编辑器更新了内容之后，立即把内容更新到 textarea 元素。

rush:js;"> CKEDITOR.instances["page_content"].on("instanceReady",function() { //set keyup event this.document.on("keyup",updateTextArea); //and paste event this.document.on("paste",updateTextArea);

}); 

function updateTextArea() 
{ 
    CKEDITOR.tools.setTimeout( function() 
          {  
            $("#page_content").val(CKEDITOR.instances.page_content.getData()); 
            $("#page_content").trigger('keyup'); 
          },0);  
} 

目前一切使用正常，算是解决了一个让我头痛的问题。

另一种解决思路：

CKEditor 编辑器是增强过的 textarea 元素,在填写了内容之后，编辑器并不立即把内容更新到原来的 textarea 元素中的,而是等到 submit 事件之前把编辑器的内容更新到 textarea 中. 因此,普通的js验证或是jquery validate验证都获取不到编辑器的值.)

1.js验证 获取CKEditor 编辑器的值其实很容易,其值就是CKEDITOR.instances.mckeditor.getData(),实例代码如下:

rush:js;">

此段代码放在编辑器控件之下即可.完整实例如下:

rush:js;"> Box ID="mckeditor" runat="server" TextMode="MultiLine" Width="98%" Height="400px" CssClass="ckeditor">

以上就是解决CKEditor无法验证的两种方案，相信大家和小编一样都有所收获，谢谢大家的阅读。