Solutions that CKEditor cannot verify (js verification + jQuery Validate verification), ckeditorjquery

Solutions that CKEditor cannot verify (js verification + jQuery Validate verification), ckeditorjquery

Recently, jQuery is used at the front end of the project, and jQuery Validate is used for front-end form verification. It is very easy to use and always satisfactory.

Some time ago, we added the html Rich Text Editor to the textarea type Elements in the form as needed, using CKEditor, Which is powerful and convenient to customize and satisfied.

However, for the textarea element enhanced by CKEditor, this field must be non-empty. jQuery Validate always fails verification because after the content is filled in by the CKEditor editor, the editor does not immediately update the content to the original textarea element. I did not carefully look at the source code. I tried one case where each submission fails and the second submission is successful, it seems that the Editor updates the content of the editor to textarea before the submit event (this is a guess, I don't know, right? I'm not familiar with jQuery and CKEditor, so I can use it for reference, if there is a problem, put the dog ).

So I found the code on the Internet to solve the problem. The code was not written by me. I just recorded the problem I encountered and the code was not original. The principle is to update the content to the textarea element immediately after the Editor updates the content.

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);      } 

At present, everything works normally, solving a headache for me.

Another solution:

The CKEditor editor is an enhanced textarea element. After the content is filled in, the editor does not immediately update the content to the original textarea element, the editor content is updated to textarea before the submit event.
Therefore, the editor value cannot be obtained for common js verification or jquery validate verification .)

1. js Verification
It is easy to get the value of the CKEditor editor. The value is CKEDITOR. instances. mckeditor. getData (). The instance code is as follows:

<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 ("Enter the topic title. "); f. tbTopicHeading. focus (); return false;} if (topicHeading. length> 50); {alert ("the topic length must be less than 50 characters. "); f. tbTopicHeading. focus (); return false;} var topicContent = CKEDITOR. instances. mckeditor. getData (); topicContent = topicContent. replace (/^ \ s +/g, ""); topicContent = topicContent. replace (/\ s + $/g, ""); if (topicContent = "") {alert ("Enter the topic content. "); f. mckeditor. focus (); return false;} if (topicContent. length> 4000) {alert ("the topic content must be within 4000 characters. "); f. mckeditor. focus (); return false ;}}</script>

Mckeditor is the id and name of the textarea editor.
The same is true in ASP. NET:
Copy codeThe Code is as follows: <asp: textBox ID = "mckeditor" runat = "server" TextMode = "MultiLine" Width = "94%" Height = "400px" CssClass = "ckeditor"> </asp: TextBox>

2. jQuery Validate Verification
The value CKEDITOR. instances. mckeditor. getData () cannot be used in jquery's validation mode.
It uses the following form to submit Verification:

Function InitRules () {opts = {rules: {tbTopicHeading: {required: true, maxlength: 50}, mckeditor: {required: true, maxlength: 4000 }}, messages: {tbTopicHeading: {required: "Enter the topic title. ", maxlength: jQuery. format ("the topic length must be less than 50 characters. ")}, mckeditor: {required:" Enter the topic content. ", maxlength: jQuery. format ("the length of the topic content must be less than 4000 characters. ")}}}}

Here, mckeditor is the Control id, which not only serves as a value, but also serves as a prompt for information locating.
Therefore, you can add the instantiated editor code when loading the page. After the Editor updates the content, the content is immediately updated to the textarea element.

The Code is as follows:

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

Put this code under the editor control. The complete example is as follows:

<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 is the id {skin: 'kama' that is displayed on the client generated by TextBox mckeditor, // set skin enterMode: Number (2), // set enter key input 1. <p> 2 is <br/> 3 is <div> shiftEnterMode: Number (1), // set the shiftenter input disableNativeSpellChecker: false, scayt_autoStartup: false, toolbar_Full: [['source', '-', 'save', 'newpage', 'preview', '-'], ['cut ', 'copy', 'paste ', 'pastetext ', 'pastefromword ','-'], ['Undo', 'redo ','-', 'Find', 'replace ','-', 'selectall ', 'removeformat'], ['numberlist', 'bulletedlist', '-', 'outdent ', 'indent'], ['justifyleft', 'justifycenter', 'justifyright ', 'justifyblock'], ['link', 'unlink', 'anchor '], ['image', 'table', 'horizontalrule'], ['subscript ', 'superscript'], '/', ['bold ', 'italic', 'underline'], ['textcolor', 'bgcolor'], ['styles ', 'format', 'font', 'fontsize'], // filebrow SerBrowseUrl: '<% = ResolveUrl ("~ /Ckfinder/ckfinder.html ") %> ', // enable the browsing function, which can be disabled for official use. Users can only upload the file // filebrowserImageBrowseUrl:' <% = ResolveUrl ("~ /Ckfinder/ckfinder.html? Type = Images ") %> ', // filebrowserImageUploadUrl:' <% = ResolveUrl ("~ /Ckfinder/core/connector/aspx/connector. aspx? Command = QuickUpload & type = Images ") %> 'If ckfinder is used, do not block the custom upload filebrowserImageUploadUrl:' <% = ResolveUrl ("~ /Fileupload. aspx? Command = QuickUpload & type = Images ") %> '}); CKEDITOR. instances ["mckeditor"]. on ("instanceReady", function () {// set keyup event this.doc ument. on ("keyup", updateTextArea); // and paste event this.doc ument. on ("paste", updateTextArea) ;}); function updateTextArea () {CKEDITOR. tools. setTimeout (function () {$ ("# mckeditor "). val (CKEDITOR. instances. mckeditor. getData (); $ ("# mckeditor "). trigger ('keyup') ;}, 0) ;}//]> </script>

The above are two solutions that cannot be verified by CKEditor. I believe everyone has the same benefits as xiaobian. Thank you for reading this article.