最近專案的前端使用了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中也是一樣:
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無法驗證的兩個方案，相信大家和小編一樣都有所收穫，謝謝大家的閱讀。
