CKEditor無(wú)法驗(yàn)證的解決方案（js驗(yàn)證+jQuery Validate驗(yàn)證）
最近項(xiàng)目的前端使用了jQuery，表單的前端驗(yàn)證用的是jQuery Validate，用起來(lái)很簡(jiǎn)單方便，一直都很滿意的。
前段時(shí)間，根據(jù)需求為表單中的 textarea 類型的元素加上了html富文本編輯器，用的是CKEditor，功能強(qiáng)大，定制方便，也很滿意。
不過(guò)用CKEditor增強(qiáng)過(guò)的 textarea 元素，這個(gè)字段要求是非空的，在jQuery Validate總是驗(yàn)證不通過(guò)，原因就是在 CKEditor 編輯器填寫了內(nèi)容之后，編輯器并不是立即把內(nèi)容更新到原來(lái)的 textarea 元素中的，我沒(méi)仔細(xì)看源代碼，試過(guò)一種情況就是每一次提交不通過(guò)，第二次提交就可以通過(guò)的，貌似編輯器是在 submit 事件之前把編輯器的內(nèi)容更新到 textarea 中的（這個(gè)是猜測(cè)，不知道對(duì)不對(duì)，我對(duì)jQuery 和 CKEditor 都不太熟悉，算是拿來(lái)就用，有問(wèn)題就放狗的那種）。
于是在網(wǎng)上找到了解決問(wèn)題的代碼，代碼不是我寫的，我只是記錄一下我遇到的問(wèn)題，代碼非原創(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);
}
目前一切使用正常，算是解決了一個(gè)讓我頭痛的問(wèn)題。
另一種解決思路：
CKEditor 編輯器是增強(qiáng)過(guò)的 textarea 元素,在填寫了內(nèi)容之后，編輯器并不立即把內(nèi)容更新到原來(lái)的 textarea 元素中的,而是等到 submit 事件之前把編輯器的內(nèi)容更新到 textarea 中.
因此,普通的js驗(yàn)證或是jquery validate驗(yàn)證都獲取不到編輯器的值.)
1.js驗(yàn)證
獲取CKEditor 編輯器的值其實(shí)很容易,其值就是CKEDITOR.instances.mckeditor.getData(),實(shí)例代碼如下:
<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("請(qǐng)輸入發(fā)表話題的標(biāo)題.");
f.tbTopicHeading.focus();
return false;
}
if(topicHeading.length>50);
{
alert("話題的主題長(zhǎng)度必須在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("請(qǐng)?zhí)顚懺掝}內(nèi)容.");
f.mckeditor.focus();
return false;
}
if(topicContent.length>4000)
{
alert("話題內(nèi)容的長(zhǎng)度必須在4000字符以內(nèi).");
f.mckeditor.focus();
return false;
}
}
</script>
其中,mckeditor為編輯器的textarea的id和name.
ASP.NET中也是一樣:
2.jQuery Validate驗(yàn)證
jquery的驗(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字符以內(nèi).")
},
mckeditor:{
required:"請(qǐng)?zhí)顚懺掝}內(nèi)容.",
maxlength:jQuery.format("話題內(nèi)容的長(zhǎng)度必須在4000字符以內(nèi).")
}
}
}
}
其中mckeditor為控件id,不僅有取值的作用,還有提示信息定位的作用.
因此,可以在頁(yè)面加載時(shí),加入實(shí)例化編輯器代碼,實(shí)現(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>
此段代碼放在編輯器控件之下即可.完整實(shí)例如下:
<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生成的對(duì)應(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")%>', //啟用瀏覽功能，正式使用場(chǎng)合可以關(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無(wú)法驗(yàn)證的兩種方案，相信大家和小編一樣都有所收獲，謝謝大家的閱讀。
- JS操作Fckeditor的一些常用方法(獲取、插入等)
- javascript獲取ckeditor編輯器的值(實(shí)現(xiàn)代碼)
- FCKeditorAPI 手冊(cè) js操作獲取等
- fckeditor常用Js,獲取fckeditor內(nèi)容,統(tǒng)計(jì)fckeditor字?jǐn)?shù),向fckeditor寫入指定代碼
- javascript fckeditor編輯器取值與賦值實(shí)現(xiàn)代碼
- FCKEditor常用Js代碼,獲取FCK內(nèi)容,統(tǒng)計(jì)FCK字?jǐn)?shù),向FCK寫入指定代碼
- FCKeditor提供了一個(gè)完整的JavaScript API
- JavaScript 使用Ckeditor+Ckfinder文件上傳案例詳解
相關(guān)文章
jQuery仿Excel表格編輯功能的實(shí)現(xiàn)代碼
Handsontable 是一個(gè)相當(dāng)給力的 jQuery 插件，它實(shí)現(xiàn)了 HTML 頁(yè)面中的表格編輯功能，并且是仿 Excel 的編輯效果。2013-05-05
jquery ajax提交表單數(shù)據(jù)的兩種實(shí)現(xiàn)方法
貌似AJAX越來(lái)越火了，作為一個(gè)WEB程序開(kāi)發(fā)者要是不會(huì)這個(gè)感覺(jué)就要落伍，甚至有可能在求職的時(shí)候?qū)冶惶蕴?。我也是一個(gè)WEB程序開(kāi)發(fā)者，當(dāng)然我也要“隨波逐流”一把，不然飯碗不保啊！2010-04-04
基于jQuery 實(shí)現(xiàn)bootstrapValidator下的全局驗(yàn)證
這篇文章主要介紹了基于jQuery 實(shí)現(xiàn)bootstrapValidator下的全局驗(yàn)證 的相關(guān)資料,需要的朋友可以參考下2015-12-12
使用jQuery輕松實(shí)現(xiàn)Ajax的實(shí)例代碼
在Asp.Net的MVC架構(gòu)中使用jQuery是一件很容易的事情，而使用jQuery實(shí)現(xiàn)Ajax更加簡(jiǎn)單。2010-08-08
jQuery插件HighCharts繪制的2D堆柱狀圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制的2D堆柱狀圖效果,結(jié)合完整實(shí)例形式分析了jQuery插件HighCharts繪制2D柱狀圖的實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
基于Jquery實(shí)現(xiàn)鍵盤按鍵監(jiān)聽(tīng)
本文介紹下，用jquery實(shí)現(xiàn)的滑動(dòng)效果，以及對(duì)鍵盤按鍵進(jìn)行監(jiān)聽(tīng)的例子，有需要的朋友，可以參考學(xué)習(xí)下2014-05-05
淺談jQuery中hide和fadeOut的區(qū)別 show和fadeIn的區(qū)別
下面小編就為大家?guī)?lái)一篇淺談jQuery中hide和fadeOut的區(qū)別 show和fadeIn的區(qū)別。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
jQuery+Cookie實(shí)現(xiàn)切換皮膚功能【附源碼下載】
這篇文章主要介紹了jQuery+Cookie實(shí)現(xiàn)切換皮膚功能,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合cookie動(dòng)態(tài)變換頁(yè)面元素樣式的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-03-03
分享28款免費(fèi)實(shí)用的 JQuery 圖片和內(nèi)容滑塊插件
這篇文章主要介紹了分享28款免費(fèi)實(shí)用的 JQuery 圖片和內(nèi)容滑塊插件,需要的朋友可以參考下2014-12-12
jQuery查詢數(shù)據(jù)返回object和字符串影響原因是什么
查詢數(shù)據(jù)返回object和字符串，導(dǎo)致這兩種情況的原因是什么呢？在本文將為大家詳細(xì)介紹下，具體祥看代碼2013-08-08