CKEditor 검증 실패에 대한 해결 방법(js 검증 + jQuery 검증 검증)_jquery
- WBOY원래의
- 2016-05-16 09:00:311623검색
최근 프로젝트의 프런트엔드는 jQuery를 사용하고, 양식의 프런트엔드 유효성 검사는 jQuery Validate를 사용하여 매우 간단하고 편리하며 항상 매우 만족하고 있습니다.
얼마 전 필요에 따라 양식의 텍스트 영역 유형 요소에 HTML 서식 있는 텍스트 편집기를 추가했는데 강력하고 사용자 정의하기도 매우 쉽습니다.
그러나 CKEditor로 강화된 텍스트 영역 요소의 경우 이 필드는 비어 있지 않아야 하며 jQuery 유효성 검사는 항상 확인에 실패합니다. 그 이유는 CKEditor 편집기가 콘텐츠를 채운 후 즉시 확인하지 않기 때문입니다. 텍스트 영역 요소에서 소스 코드를 주의 깊게 보지 않았습니다. 시도한 한 가지 상황은 모든 제출이 실패했지만 두 번째 제출은 편집자가 편집자의 내용을 업데이트한 것 같습니다. (이것은 단지 추측일 뿐이고 올바른지 모르겠습니다. 저는 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 편집기는 콘텐츠를 채운 후 콘텐츠를 원본 텍스트 영역으로 즉시 업데이트하지 않고 제출 이벤트가 발생할 때까지 기다립니다.
따라서 일반 js 검증이나 jquery 검증 검증으로는 에디터 값을 얻을 수 없습니다.)
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는 편집자의 텍스트 영역 ID와 이름입니다.
ASP.NET에서도 마찬가지입니다.
2.jQuery 유효성 검사
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가 확인할 수 없는 문제를 해결하기 위한 두 가지 솔루션입니다. 모두가 편집기와 같은 내용을 배웠다고 생각합니다.