CKEditorで検証できない問題の解決策（js検証 jQuery Validate検証）_jquery

最近のプロジェクトのフロントエンドは jquery を使用しており、フォームのフロントエンド検証には jquery validate を使用していますが、非常にシンプルで使いやすく、常に非常に満足しています。

少し前に、必要に応じてフォーム内の textarea 型要素に html リッチ テキスト エディターが追加されました。私は ckeditor を使用しました。強力でカスタマイズが簡単です。これも非常に満足しています。

ただし、ckeditor で拡張された textarea 要素の場合、このフィールドは空ではない必要があり、jquery validate は常に検証に失敗します。その理由は、ckeditor エディターがコンテンツを入力した後、エディターがすぐに更新されないためです。コンテンツを元のコンテンツに戻します。textarea 要素で、ソース コードを注意深く見ていませんでした。試した 1 つの状況では、すべての送信が失敗しましたが、2 番目の送信は成功しました。エディターがエディターのコンテンツを元のコンテンツに更新しているようです。 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 はエディタのテキストエリアの 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 で検証できない問題に対する 2 つの解決策です。誰もがエディターのようなものを得ることができると信じています。読んでいただきありがとうございます。