TinyMCE jQuery驗證問題

Question

我正在爲我的頁面使用簡單的TinyMCE。使用jQuery驗證我的文本區域時發生問題。

jQuery沒有驗證我的文本區域。

1. 仍然保存空文本
2. 提到（「不要讓Text區爲空」）錯誤occued時寫在文本區的一些事情。

這是我的代碼：

<-------------------------------------------------------> 
jQuery code: 
<-------------------------------------------------------> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#frmeditpages").validate({ 
     rules: { 
      txtdescription: 
      { 
       required:true 
      } 

       }, 
     messages: { 
      txtdescription: ".  Don't leave the Text area Empty" 

        } 
    }); 
}); 
</script> 
<-----------------------------------------------------------> 
<!-- TinyMCE --> 
<-----------------------------------------------------------> 

<script type="text/javascript" src="../js/jquery-lib.js"></script> 
<script type="text/javascript" src="../js/jquery.validate.js"></script> 
<script type="text/javascript" src="../tinymce/jscripts/tiny_mce/tiny_mce.js"></script> 

<script type="text/javascript"> 
    tinyMCE.init({ 
     // General options 
     mode : "textareas", 
     theme : "simple", 
     plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave", 

     // Theme options 
     theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", 
     theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", 
     theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", 
     theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft", 
     theme_advanced_toolbar_location : "top", 
     theme_advanced_toolbar_align : "left", 
     theme_advanced_statusbar_location : "bottom", 
     theme_advanced_resizing : true, 

     // Example content CSS (should be your site CSS) 
     content_css : "css/content.css", 

     // Drop lists for link/image/media/template dialogs 
     template_external_list_url : "lists/template_list.js", 
     external_link_list_url : "lists/link_list.js", 
     external_image_list_url : "lists/image_list.js", 
     media_external_list_url : "lists/media_list.js", 

     // Style formats 
     style_formats : [ 
      {title : 'Bold text', inline : 'b'}, 
      {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}}, 
      {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}}, 
      {title : 'Example 1', inline : 'span', classes : 'example1'}, 
      {title : 'Example 2', inline : 'span', classes : 'example2'}, 
      {title : 'Table styles'}, 
      {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'} 
     ], 

     // Replace values for the template plugin 
     template_replace_values : { 
      username : "Some User", 
      staffid : "991234" 
     } 
    }); 
</script> 
<!-- /TinyMCE --> 

Answer 1

你需要知道TinyMCE的不等於textarea的！ Tinymce將隱藏初始化的textarea並創建用戶可以編輯內容的iframe。因此需要調用tinymce保存方法以將iframe內容寫回到textarea。

所以你需要下面的代碼

var editor = tinymce.get(editor_id); 
editor.save(); // writes content back to the textarea 
// you may now use jQuery or editor.getContent(); to acces the content 

Answer 2

挑釁工作這一邏輯

$("#buttontosave").click(function() { 
    tinyMCE.triggerSave(); 
    var status; 
    status = $("#menu_create").valid(); //Validate again 
    /* if(status==true) 
    { 
     //alert('true') 
    } 
    else 
    { 
     // alert('false') 

    }*/ 

}）;

buttontosave您的提交按鈕的ID 注：PLZ也驗證隱藏價值，不要做這樣的

ignore: 'input[type="hidden"]', 

PLZ投入評論

//ignore: 'input[type="hidden"]', 

Answer 3

下面的代碼爲我工作對你也一樣。只要將下面的代碼之前，您的驗證電話，但提交後觸發

 
    var content = tinyMCE.activeEditor.getContent(); // get the content 
    $('#textareaID').val(content);