Penyelesaian kepada kegagalan CKEditor untuk mengesahkan (pengesahan js + pengesahan pengesahan jQuery)_jquery

Halaman depan projek baru-baru ini menggunakan jQuery, dan pengesahan bahagian hadapan borang menggunakan jQuery Validate Ia sangat mudah dan mudah digunakan, dan saya sentiasa berpuas hati.

Beberapa masa lalu, saya menambahkan editor teks kaya HTML pada elemen jenis textarea dalam bentuk mengikut keperluan yang saya gunakan CKEditor, yang berkuasa dan mudah untuk disesuaikan.

Walau bagaimanapun, untuk elemen textarea yang dipertingkatkan dengan CKEditor, medan ini mestilah tidak kosong, dan jQuery Validate sentiasa gagal dalam pengesahan Sebabnya ialah selepas editor CKEditor mengisi kandungan, editor tidak serta-merta kemas kini kandungan kepada yang asal Dalam elemen textarea, saya tidak melihat kod sumber dengan teliti textarea sebelum acara penyerahan. (Ini hanya tekaan, saya tidak tahu sama ada ia betul. Saya tidak begitu biasa dengan jQuery dan CKEditor. Saya hanya menggunakannya semasa mereka datang dan biarkan mereka pergi jika terdapat sebarang masalah ).

Jadi saya menemui kod untuk menyelesaikan masalah di Internet. Kod itu tidak ditulis oleh saya. Saya hanya merekodkan masalah yang saya hadapi. Prinsipnya ialah apabila editor mengemas kini kandungan, ia segera mengemas kini kandungan kepada elemen 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);  
    } 

Semuanya berfungsi seperti biasa sekarang, yang menyelesaikan masalah sakit kepala untuk saya.

Penyelesaian lain:

Editor CKEditor ialah elemen textarea yang dipertingkatkan Selepas mengisi kandungan, editor tidak serta-merta mengemas kini kandungan kepada elemen textarea asal, sebaliknya, ia menunggu sehingga acara serah untuk mengemas kini kandungan editor ke kawasan teks.
Oleh itu, pengesahan js biasa atau pengesahan pengesahan jquery tidak boleh mendapatkan nilai editor.)

Pengesahan 1.js
Mendapatkan nilai editor CKEditor sebenarnya sangat mudah. ​​Nilainya ialah 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> 

Antaranya, mckeditor ialah id dan nama kawasan teks editor.

Perkara yang sama berlaku dalam ASP.NET:

Salin kod Kod adalah seperti berikut:

2.jQuery Mengesahkan
mod pengesahan jquery tidak boleh terus menggunakan nilai CKEDITOR.instances.mckeditor.getData(). Ia diserahkan untuk pengesahan menggunakan borang berikut:

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

Antaranya, mckeditor ialah id kawalan, yang bukan sahaja mempunyai fungsi mendapatkan nilai, tetapi juga mempunyai fungsi meletakkan maklumat segera

Oleh itu, anda boleh menambah kod editor instantiasi apabila halaman dimuatkan, supaya selepas editor mengemas kini kandungan, ia akan segera mengemas kini kandungan ke elemen textarea.

Kod adalah seperti berikut:

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

Kod ini boleh diletakkan di bawah kawalan editor Contoh lengkap adalah seperti berikut:

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

Di atas adalah dua penyelesaian untuk menyelesaikan masalah yang tidak dapat disahkan oleh CKEditor Saya percaya bahawa semua orang telah mempelajari sesuatu seperti editor. Terima kasih kerana membaca.