Solution à l'échec de la vérification de CKEditor (vérification js + vérification jQuery Validate)

Solution à l'échec de la vérification de CKEditor (vérification js + vérification jQuery Validate)_jquery

WBOY

Libérer： 2016-05-16 09:00:31

original

1654 Les gens l'ont consulté

Le front-end du projet récent utilise jQuery, et la validation front-end du formulaire utilise jQuery Validate. C'est très simple et pratique à utiliser, et j'ai toujours été très satisfait.

Il y a quelque temps, j'ai ajouté un éditeur de texte riche HTML aux éléments de type textarea du formulaire en fonction des besoins. J'ai utilisé CKEditor, qui est puissant et facile à personnaliser. J'en suis également très satisfait.

Cependant, pour l'élément textarea amélioré avec CKEditor, ce champ doit être non vide, et jQuery Validate échoue toujours à la vérification. La raison en est qu'une fois que l'éditeur CKEditor a rempli le contenu, l'éditeur ne le fait pas immédiatement. mettre à jour le contenu avec celui d'origine. Dans l'élément textarea, je n'ai pas examiné attentivement le code source. Une situation que j'ai essayée était que chaque soumission échouait, mais la deuxième soumission a réussi. la zone de texte avant l'événement de soumission. (Ce n'est qu'une supposition, je ne sais pas si c'est correct. Je ne suis pas très familier avec jQuery et CKEditor. Je les utilise simplement au fur et à mesure qu'ils viennent et je les laisse partir s'il y a des problèmes. ).

J'ai donc trouvé le code pour résoudre le problème sur Internet. Le code n'a pas été écrit par moi, j'ai juste enregistré les problèmes que j'ai rencontrés. Le code n'est pas original. Le principe est que lorsque l'éditeur met à jour le contenu, il met immédiatement à jour le contenu vers l'élément 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);  
    }

Copier après la connexion

Tout fonctionne normalement maintenant, ce qui résout pour moi un problème de mal de tête.

Autre solution :

L'éditeur CKEditor est un élément textarea amélioré. Après avoir rempli le contenu, l'éditeur ne met pas immédiatement à jour le contenu vers l'élément textarea d'origine, mais attend l'événement submit pour mettre à jour le contenu de l'éditeur vers l'élément textarea.
Par conséquent, la validation js ordinaire ou la validation jquery validate ne peut pas obtenir la valeur de l'éditeur.)

Vérification 1.js
Obtenir la valeur de l'éditeur CKEditor est en fait très simple. La valeur est CKEDITOR.instances.mckeditor.getData(). L'exemple de code est le suivant :
.

<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>

Copier après la connexion

Parmi eux, mckeditor est l'identifiant et le nom de la zone de texte de l'éditeur.
La même chose est vraie dans ASP.NET :

Copier le code Le code est le suivant :

2.jQuery Valider
Le mode de vérification de jquery ne peut pas utiliser directement la valeur de CKEDITOR.instances.mckeditor.getData(). Il est soumis pour vérification à l'aide du formulaire suivant :

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字符以内.")  
        } 
         }  
      } 
    }

Copier après la connexion

Parmi eux, mckeditor est l'identifiant de contrôle, qui a non seulement pour fonction d'obtenir une valeur, mais a également pour fonction de positionner les informations d'invite

. Par conséquent, vous pouvez ajouter le code de l'éditeur d'instanciation lorsque la page est chargée, de sorte qu'une fois que l'éditeur a mis à jour le contenu, il mettra immédiatement à jour le contenu vers l'élément textarea.

Le code est le suivant :

<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>

Copier après la connexion

Ce code peut être placé sous le contrôle de l'éditeur. L'exemple complet est le suivant :

<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&#63;Type=Images")%>', 
//filebrowserImageUploadUrl:'<%=ResolveUrl("~/ckfinder/core/connector/aspx/connector.aspx&#63;command=QuickUpload&type=Images")%>' 如果使用ckfinder 就不要屏蔽 
//自定义的上传 
filebrowserImageUploadUrl:'<%=ResolveUrl("~/fileupload/fileupload.aspx&#63;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>

Copier après la connexion

Ce qui précède sont deux solutions pour résoudre le problème que CKEditor ne peut pas vérifier. Je pense que tout le monde a appris quelque chose comme l'éditeur. Merci d'avoir lu.