CKEditor無法驗證的解決方案（js驗證+jQuery Validate驗證），ckeditorjquery

CKEditor無法驗證的解決方案（js驗證+jQuery Validate驗證），ckeditorjquery

最近項目的前端使用了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()               {                  $("#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(),執行個體代碼如下:

<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> 

以上就是解決CKEditor無法驗證的兩種方案，相信大家和小編一樣都有所收穫，謝謝大家的閱讀。