CKEditor无法验证的解决方案（js验证+jQuery Validate验证）-工具盒子

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

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

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

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


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()
{

$(&quot;#page_content&quot;).val(CKEDITOR.instances.page_content.getData());
$(&quot;#page_content&quot;).trigger('keyup');
}, 0);

}

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

另一种解决思路：

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

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


<script language="javascript" type="text/javascript">   
function checkForm()
{
var f=document.form1;
var topicHeading=f.tbTopicHeading.value;
topicHeading = topicHeading.replace(/^\s+/g,"");
topicHeading = topicHeading.replace(/\s+$/g,"");
if (topicHeading =="")
{
alert("请输入发表话题的标题.");
f.tbTopicHeading.focus();
return false;
}
if(topicHeading.length>50);
{
alert("话题的主题长度必须在50字符以内.");
f.tbTopicHeading.focus();
return false;
}
var topicContent=CKEDITOR.instances.mckeditor.getData();
     topicContent = topicContent.replace(/^\s+/g,&quot;&quot;); 
     topicContent = topicContent.replace(/\s+$/g,&quot;&quot;); 
             if (topicContent ==&quot;&quot;) 
              { 
                alert(&quot;请填写话题内容.&quot;); 
                f.mckeditor.focus(); 
                return false; 
              }  
          if(topicContent.length&amp;gt;4000) 
          { 
           alert(&amp;quot;话题内容的长度必须在4000字符以内.&amp;quot;); 
           f.mckeditor.focus(); 
           return false; 
          }       

}

&lt;/script&gt;

其中,mckeditor为编辑器的textarea的id和name.
ASP.NET中也是一样:
++复制代码++ 代码如下:
<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine" Width="94%" Height="400px" CssClass="ckeditor"></asp:TextBox>

2.jQuery Validate验证jquery的验证模式不能直接使用CKEDITOR.instances.mckeditor.getData()这个值.
它是使用如下形式来提交验证:


function InitRules() { 
      opts = { 
         rules: 
         { 
            tbTopicHeading:{ 
            required:true, 
            maxlength:50   
          },           
          mckeditor:{ 
            required:true, 
            maxlength:4000 
          }  
         }, 
         messages: 
         { 
          tbTopicHeading:{ 
          required:"请输入发表话题的标题.", 
          maxlength:jQuery.format("话题的主题长度必须在50字符以内.")  
        }, 
          mckeditor:{ 
          required:"请填写话题内容.", 
          maxlength:jQuery.format("话题内容的长度必须在4000字符以内.")  
        } 
         }  
      } 
    }

其中mckeditor为控件id,不仅有取值的作用,还有提示信息定位的作用.
因此,可以在页面加载时,加入实例化编辑器代码,实现编辑器更新了内容之后，立即把内容更新到 textarea 元素。

代码如下：


<script type="text/javascript"> 
//<![CDATA[ 
CKEDITOR.instances["mckeditor"].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() 
          {    
            $(&quot;#mckeditor&quot;).val(CKEDITOR.instances.mckeditor.getData());    
            $(&quot;#mckeditor&quot;).trigger('keyup');    
          }, 0);  
}   

//]]>
</script>

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


<asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine" Width="98%" Height="400px" CssClass="ckeditor"></asp:TextBox> 
<script type="text/javascript"> 
//<![CDATA[ 
CKEDITOR.replace( '<%=mckeditor.ClientID %>',// mckeditor.ClientID为TextBox mckeditor生成的对应客户端看到的id 
{ 
skin : 'kama',//设置皮肤 
enterMode : Number(2),//设置enter键的输入1.<p>2为<br/>3为<div> 
shiftEnterMode : Number(1), // 设置shiftenter的输入 
disableNativeSpellChecker:false,  
scayt_autoStartup:false, 
toolbar_Full : [ 
['Source','-','Save','NewPage','Preview','-'], 
['Cut','Copy','Paste','PasteText','PasteFromWord','-'], 
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], 
['NumberedList','BulletedList','-','Outdent','Indent'], 
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], 
['Link','Unlink','Anchor'], 
['Image','Table','HorizontalRule'],['Subscript','Superscript'], 
'/', 
['Bold','Italic','Underline'], 
['TextColor','BGColor'], 
['Styles','Format','Font','FontSize'] 
], 
//filebrowserBrowseUrl: '<%=ResolveUrl("~/ckfinder/ckfinder.html")%>', //启用浏览功能，正式使用场合可以关闭，只允许用户上传 
//filebrowserImageBrowseUrl:'<%=ResolveUrl("~/ckfinder/ckfinder.html?Type=Images")%>', 
//filebrowserImageUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images")%>' 如果使用ckfinder 就不要屏蔽 
//自定义的上传 
filebrowserImageUploadUrl:'<%=ResolveUrl("~/fileupload/fileupload.aspx?command=QuickUpload&type=Images")%>' 
}); 
CKEDITOR.instances["mckeditor"].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()  
          { 
            $(&quot;#mckeditor&quot;).val(CKEDITOR.instances.mckeditor.getData());  
            $(&quot;#mckeditor&quot;).trigger('keyup');  
          }, 0);  
}   

//]]>
</script>

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