Das Front-End des aktuellen Projekts verwendet jQuery und die Front-End-Validierung des Formulars verwendet jQuery Validate. Es ist sehr einfach und bequem zu verwenden und ich war immer sehr zufrieden.
Vor einiger Zeit habe ich den Textbereichselementen im Formular je nach Bedarf einen HTML-Rich-Text-Editor hinzugefügt, der leistungsstark und einfach anzupassen ist.
Für das mit CKEditor erweiterte Textarea-Element muss dieses Feld jedoch nicht leer sein, und die Überprüfung durch jQuery schlägt immer fehl. Der Grund dafür ist, dass der Editor den Inhalt nicht sofort ausfüllt Aktualisieren Sie den Inhalt auf den Originaltext. Ich habe mir den Quellcode nicht genau angesehen. Eine Situation, die ich versucht habe, war, dass jede Einreichung fehlgeschlagen ist, aber die zweite Einreichung hat anscheinend den Inhalt des Editors aktualisiert den Textbereich vor dem Submit-Ereignis. (Dies ist nur eine Vermutung, ich weiß nicht, ob es richtig ist. Ich bin mit jQuery und CKEditor nicht sehr vertraut. Ich verwende sie einfach so, wie sie kommen, und lasse sie los, wenn es Probleme gibt ).
Also habe ich den Code zur Lösung des Problems im Internet gefunden. Der Code wurde nicht von mir geschrieben. Ich habe nur die Probleme aufgezeichnet, auf die ich gestoßen bin. Das Prinzip besteht darin, dass der Editor, wenn er den Inhalt aktualisiert, den Inhalt des Textarea-Elements sofort aktualisiert.
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);
}
Jetzt funktioniert alles normal, was für mich die Lösung meines Kopfschmerzproblems darstellt.
Eine andere Lösung:
Der CKEditor-Editor ist ein erweitertes Textarea-Element. Nach dem Ausfüllen des Inhalts aktualisiert der Editor den Inhalt nicht sofort auf das ursprüngliche Textarea-Element, sondern wartet bis zum Submit-Ereignis.
Daher kann die normale JS-Validierung oder die JQuery-Validierungsvalidierung den Editorwert nicht erhalten.)
1.js-Überprüfung
Das Abrufen des Werts des CKEditor-Editors ist eigentlich sehr einfach. Der Wert lautet CKEDITOR.instances.mckeditor.getData(). Der Beispielcode lautet wie folgt:
<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>
Unter anderem ist mckeditor die ID und der Name des Textbereichs des Editors.
Das Gleiche gilt für ASP.NET:
2.jQuery-Validierung
Der Verifizierungsmodus von jquery kann den Wert von CKEDITOR.instances.mckeditor.getData() nicht direkt verwenden.
Die Einreichung zur Überprüfung erfolgt über das folgende Formular:
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字符以内.")
}
}
}
}
Der Code lautet wie folgt:
<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> 
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
