CKEditor無法驗證的解決方案(js驗證+jQuery Validate驗證)
最近項目的前端使用了jQuery,表單的前端驗證用的是jQuery Validate,用起來很簡單方便,一直都很滿意的。
前段時間,根據(jù)需求為表單中的 textarea 類型的元素加上了html富文本編輯器,用的是CKEditor,功能強大,定制方便,也很滿意。
不過用CKEditor增強過的 textarea 元素,這個字段要求是非空的,在jQuery Validate總是驗證不通過,原因就是在 CKEditor 編輯器填寫了內(nèi)容之后,編輯器并不是立即把內(nèi)容更新到原來的 textarea 元素中的,我沒仔細看源代碼,試過一種情況就是每一次提交不通過,第二次提交就可以通過的,貌似編輯器是在 submit 事件之前把編輯器的內(nèi)容更新到 textarea 中的(這個是猜測,不知道對不對,我對jQuery 和 CKEditor 都不太熟悉,算是拿來就用,有問題就放狗的那種)。
于是在網(wǎng)上找到了解決問題的代碼,代碼不是我寫的,我只是記錄一下我遇到的問題,代碼非原創(chuàng)。原理就是當(dāng)編輯器更新了內(nèi)容之后,立即把內(nèi)容更新到 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 元素,在填寫了內(nèi)容之后,編輯器并不立即把內(nèi)容更新到原來的 textarea 元素中的,而是等到 submit 事件之前把編輯器的內(nèi)容更新到 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ā)表話題的標(biāo)題."); f.tbTopicHeading.focus(); return false; } if(topicHeading.length>50); { alert("話題的主題長度必須在50字符以內(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("請?zhí)顚懺掝}內(nèi)容."); f.mckeditor.focus(); return false; } if(topicContent.length>4000) { alert("話題內(nèi)容的長度必須在4000字符以內(nèi)."); f.mckeditor.focus(); return false; } } </script>
其中,mckeditor為編輯器的textarea的id和name.
ASP.NET中也是一樣:
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:"請輸入發(fā)表話題的標(biāo)題.", maxlength:jQuery.format("話題的主題長度必須在50字符以內(nèi).") }, mckeditor:{ required:"請?zhí)顚懺掝}內(nèi)容.", maxlength:jQuery.format("話題內(nèi)容的長度必須在4000字符以內(nèi).") } } } }
其中mckeditor為控件id,不僅有取值的作用,還有提示信息定位的作用.
因此,可以在頁面加載時,加入實例化編輯器代碼,實現(xiàn)編輯器更新了內(nèi)容之后,立即把內(nèi)容更新到 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生成的對應(yīng)客戶端看到的id { skin : 'kama',//設(shè)置皮膚 enterMode : Number(2),//設(shè)置enter鍵的輸入1.<p>2為<br/>3為<div> shiftEnterMode : Number(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','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['Image','Table','HorizontalRule'],['Subscript','Superscript'], '/', ['Bold','Italic','Underline'], ['TextColor','BGColor'], ['Styles','Format','Font','FontSize'] ], //filebrowserBrowseUrl: '<%=ResolveUrl("~/ckfinder/ckfinder.html")%>', //啟用瀏覽功能,正式使用場合可以關(guān)閉,只允許用戶上傳 //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無法驗證的兩種方案,相信大家和小編一樣都有所收獲,謝謝大家的閱讀。
- JS操作Fckeditor的一些常用方法(獲取、插入等)
- javascript獲取ckeditor編輯器的值(實現(xiàn)代碼)
- FCKeditorAPI 手冊 js操作獲取等
- fckeditor常用Js,獲取fckeditor內(nèi)容,統(tǒng)計fckeditor字?jǐn)?shù),向fckeditor寫入指定代碼
- javascript fckeditor編輯器取值與賦值實現(xiàn)代碼
- FCKEditor常用Js代碼,獲取FCK內(nèi)容,統(tǒng)計FCK字?jǐn)?shù),向FCK寫入指定代碼
- FCKeditor提供了一個完整的JavaScript API
- JavaScript 使用Ckeditor+Ckfinder文件上傳案例詳解
相關(guān)文章
jquery ajax提交表單數(shù)據(jù)的兩種實現(xiàn)方法
貌似AJAX越來越火了,作為一個WEB程序開發(fā)者要是不會這個感覺就要落伍,甚至有可能在求職的時候?qū)冶惶蕴?。我也是一個WEB程序開發(fā)者,當(dāng)然我也要“隨波逐流”一把,不然飯碗不保?。?/div> 2010-04-04基于jQuery 實現(xiàn)bootstrapValidator下的全局驗證
這篇文章主要介紹了基于jQuery 實現(xiàn)bootstrapValidator下的全局驗證 的相關(guān)資料,需要的朋友可以參考下2015-12-12jQuery插件HighCharts繪制的2D堆柱狀圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制的2D堆柱狀圖效果,結(jié)合完整實例形式分析了jQuery插件HighCharts繪制2D柱狀圖的實現(xiàn)技巧與相關(guān)注意事項,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03淺談jQuery中hide和fadeOut的區(qū)別 show和fadeIn的區(qū)別
下面小編就為大家?guī)硪黄獪\談jQuery中hide和fadeOut的區(qū)別 show和fadeIn的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08jQuery+Cookie實現(xiàn)切換皮膚功能【附源碼下載】
這篇文章主要介紹了jQuery+Cookie實現(xiàn)切換皮膚功能,結(jié)合完整實例形式分析了jQuery結(jié)合cookie動態(tài)變換頁面元素樣式的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-03-03分享28款免費實用的 JQuery 圖片和內(nèi)容滑塊插件
這篇文章主要介紹了分享28款免費實用的 JQuery 圖片和內(nèi)容滑塊插件,需要的朋友可以參考下2014-12-12jQuery查詢數(shù)據(jù)返回object和字符串影響原因是什么
查詢數(shù)據(jù)返回object和字符串,導(dǎo)致這兩種情況的原因是什么呢?在本文將為大家詳細介紹下,具體祥看代碼2013-08-08最新評論