CKEditor無(wú)法驗(yàn)證的解決方案（js驗(yàn)證+jQuery Validate驗(yàn)證）_

1、CKEditor無(wú)法驗(yàn)證的解決方案（js驗(yàn)證+jQuery Validate驗(yàn)證）_ 這篇文章主要為大家具體介紹了CKEditor無(wú)法驗(yàn)證的解決方案和jQuery Validate驗(yàn)證框架，感愛(ài)好的小伙伴們可以參考一下 最近項(xiàng)目的前端用法了jQuery，表單的前端驗(yàn)證用的是jQuery Validate，用起來(lái)很簡(jiǎn)潔便利，始終都很滿足的。 前段時(shí)間，依據(jù)需求為表單中的 textarea 類(lèi)型的元素加上了html富文本編輯器，用的是CKEditor，功能強(qiáng)大，定制便利，也很滿足。 不過(guò)用CKEditor增加過(guò)的 textarea 元素，這個(gè)字段要求是非空的，在jQuery Validate總是驗(yàn)

2、證不通過(guò)，緣由就是在 CKEditor 編輯器填寫(xiě)了內(nèi)容之后，編輯器并不是立刻把內(nèi)容更新到原來(lái)的 textarea 元素中的，我沒(méi)認(rèn)真看源代碼，試過(guò)一種狀況就是每一次提交不通過(guò)，其次次提交就可以通過(guò)的，貌似編輯器是在 submit 大事之前把編輯器的內(nèi)容更新到 textarea 中的（這個(gè)是猜想，不知道對(duì)不對(duì)，我對(duì)jQuery 和 CKEditor 都不太熟識(shí)，算是拿來(lái)就用，有問(wèn)題就放狗的那種）。 于是在網(wǎng)上找到了解決問(wèn)題的代碼，代碼不是我寫(xiě)的，我只是記錄一下我遇到的問(wèn)題，代碼非原創(chuàng)。原理就是當(dāng)編輯器更新了內(nèi)容之后，立刻把內(nèi)容更新到 textarea 元素。 CKEDITOR.instance

3、spage_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_co

4、ntent).trigger(keyup); , 0); 目前一切用法正常，算是解決了一個(gè)讓我頭痛的問(wèn)題。 另一種解決思路： CKEditor 編輯器是增加過(guò)的 textarea 元素,在填寫(xiě)了內(nèi)容之后，編輯器并不立刻把內(nèi)容更新到原來(lái)的 textarea 元素中的,而是等到 submit 大事之前把編輯器的內(nèi)容更新到 textarea 中. 因此,一般的js驗(yàn)證或是jquery validate驗(yàn)證都獵取不到編輯器的值.) 1.js驗(yàn)證 獵取CKEditor 編輯器的值其實(shí)很簡(jiǎn)單,其值就是CKEDITOR.instances.mckeditor.getData(),實(shí)例代碼如下: script

5、 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(請(qǐng)輸入發(fā)表話題的標(biāo)題.); f.tbTopicHeading.focus(); return false; if(

6、topicHeading.length50); alert(話題的主題長(zhǎng)度必需在50字符以?xún)?nèi).); f.tbTopicHeading.focus(); return false; var topicContent=CKEDITOR.instances.mckeditor.getData(); topicContent = topicContent.replace(/s+/g,); topicContent = topicContent.replace(/s+$/g,); if (topicContent =) alert(請(qǐng)?zhí)顚?xiě)話題內(nèi)容.); f.mckeditor.focus(); retu

7、rn false; if(topicContent.length4000) alert(話題內(nèi)容的長(zhǎng)度必需在4000字符以?xún)?nèi).); f.mckeditor.focus(); return false; /script 其中,mckeditor為編輯器的textarea的id和name. ASP.NET中也是一樣: 復(fù)制代碼 代碼如下: asp:TextBox ID=mckeditor runat=server TextMode=MultiLine Width=94% Height=400px CssClass=ckeditor/asp:TextBox 2.jQuery Validate驗(yàn)證 j

8、query的驗(yàn)證模式不能挺直用法CKEDITOR.instances.mckeditor.getData()這個(gè)值. 它是用法如下形式來(lái)提交驗(yàn)證: function InitRules() opts = rules: tbTopicHeading: required:true, maxlength:50 , mckeditor: required:true, maxlength:4000 , messages: tbTopicHeading: required:請(qǐng)輸入發(fā)表話題的標(biāo)題., maxlength:jQuery.format(話題的主題長(zhǎng)度必需在50字符以?xún)?nèi).) , mckeditor

9、: required:請(qǐng)?zhí)顚?xiě)話題內(nèi)容., maxlength:jQuery.format(話題內(nèi)容的長(zhǎng)度必需在4000字符以?xún)?nèi).) 其中mckeditor為控件id,不僅有取值的作用,還有提示信息定位的作用. 因此,可以在頁(yè)面加載時(shí),加入實(shí)例化編輯器代碼,實(shí)現(xiàn)編輯器更新了內(nèi)容之后，立刻把內(nèi)容更新到 textarea 元素。 代碼如下： script type=text/javascript /!CDATA CKEDITOR.instancesmckeditor.on(instanceReady, function() /set keyup event this.document.on(keyu

10、p, 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 此段代碼放在編輯器控件之下即可.完整實(shí)例如下: asp:TextBox ID=mckeditor ru

11、nat=server TextMode=MultiLine Width=98% Height=400px CssClass=ckeditor/asp:TextBox script type=text/javascript /!CDATA CKEDITOR.replace( %=mckeditor.ClientID %,/ mckeditor.ClientID為T(mén)extBox mckeditor生成的對(duì)應(yīng)客戶端看到的id skin : kama,/設(shè)置皮膚 enterMode : Number(2),/設(shè)置enter鍵的輸入1.p2為br/3為div shiftEnterMode : Numbe

12、r(1), / 設(shè)置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,Justify

13、Right,JustifyBlock, Link,Unlink,Anchor, Image,Table,HorizontalRule,Subscript,Superscript, /, Bold,Italic,Underline, TextColor,BGColor, Styles,Format,Font,FontSize , /filebrowserBrowseUrl: %=ResolveUrl(/ckfinder/ckfinder.html)%, /啟用掃瞄功能，正式用法場(chǎng)合可以關(guān)閉，只允許用戶上傳 /filebrowserImageBrowseUrl:%=ResolveUrl(/ckfi

14、nder/ckfinder.html?Type=Images)%, /filebrowserImageUploadUrl:%=ResolveUrl(/ckfinder/core/connector/aspx/connector.aspx?command=QuickUploadtype=Images)% 假如用法ckfinder 就不要屏蔽 /自定義的上傳 filebrowserImageUploadUrl:%=ResolveUrl(/fileupload/fileupload.aspx?command=QuickUploadtype=Images)% ); CKEDITOR.instancesmckeditor.on(instanceReady, function() /set keyup event this.document.on(keyup, updateTextArea); /and paste event this.document.on(paste,