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

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,"");
                  topicContent = topicContent.replace(/\s+$/g,"");
                                  if (topicContent =="")
                                   {
                                        alert("请填写话题内容.");
                                        f.mckeditor.focus();
                                        return false;
                                   }

                                   if(topicContent.length>4000)
                                   {
                                      alert("话题内容的长度必须在4000字符以内.");
                                      f.mckeditor.focus();
                                      return false;
                                   }

              }
              </script>

其中,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()
                            {
                                $("#mckeditor").val(CKEDITOR.instances.mckeditor.getData());
                                $("#mckeditor").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()
                            {
                                $("#mckeditor").val(CKEDITOR.instances.mckeditor.getData());
                                $("#mckeditor").trigger('keyup');
                            }, 0);
        }
//]]>
                            </script>

引用自：http://www./forum.php?mod=viewthread&tid=16330&from=portal