CKEditor 검증 실패에 대한 해결 방법(js 검증 + jQuery 검증 검증)

CKEditor 검증 실패에 대한 해결 방법(js 검증 + jQuery 검증 검증)_jquery

WBOY

풀어 주다： 2016-05-16 09:00:31

원래의

1654명이 탐색했습니다.

최근 프로젝트의 프런트엔드는 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&#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>

로그인 후 복사

위 내용은 CKEditor가 확인할 수 없는 문제를 해결하기 위한 두 가지 솔루션입니다. 모두가 편집기와 같은 내용을 배웠다고 생각합니다.