2014-10-27 93 views
1

我在網站上構建了一個發佈系統,但每當我在我的textareas中包含TinyMCE插件時遇到了一個奇怪的問題。我在JavaScript中驗證輸入是否爲空(見代碼打擊)。如果沒有TinyMCE,它可以正常工作,但是當我包含TinyMCE插件時,這些值不會返回任何值。TinyMCE Javascript驗證

('#form_createblog').bind('submit',function(){ 
    var titel = $('input[name=titel]').val(); 
    var categorie = $('select[name=categorie]').val(); 
    var synopsis = $('textarea[name=synopsis]').val(); // this remains blank when tinymce is included 
    var inhoud = $('textarea[name=inhoud]').val(); // this remains blank when tinymce is included 

    console.log(titel); 
    console.log(categorie); 
    console.log(synopsis); 
    console.log(inhoud); 

    var proceed = true; 
    if (titel==""){ 
     $('input[name=titel]').css({'border':'2px solid red'}); 
     proceed = false; 
     } 
    if (categorie==""){ 
     $('select[name=categorie]').css({'border':'2px solid red'}); 
     proceed = false; 
     } 
    if (synopsis==""){ 
     $('textarea[name=synopsis]').css({'border':'2px solid red'}); 
     proceed = false; 
     } 
    if (inhoud==""){ 
     $('textarea[name=inhoud]').css({'border':'2px solid red'}); 
     proceed = false; 
     } 

more code leading up to ajax call ... 

TinyMCE文件看起來像這樣。

tinyMCE.init({ 
     mode : "textareas", 
     theme : "advanced", 
     plugins : "paste,advimage", 
     width : "100%", 
     height : "200", 
     relative_urls : false, 
     element_format : "html", 
     doctype : '<html>', 
     theme_advanced_blockformats : "p,h1,h2", 
     theme_advanced_buttons1 : "formatselect,bold,italic,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,link,unlink,cleanup,|,cut,copy,paste,pastetext,|,image,hr,removeformat", 
     theme_advanced_buttons2 : "", 
     theme_advanced_buttons3 : "", 
     theme_advanced_toolbar_location : "top", 
     theme_advanced_toolbar_align : "left", 
     theme_advanced_statusbar_location : "bottom", 
     theme_advanced_resizing : false, 
     theme_advanced_resize_horizontal : false, 
     theme_advanced_resizing_use_cookie : false, 
     inline_styles : true 
}); 

和我的HTML看起來像這樣

<form name="maakblogpost" id="form_createblog" method="post" onsubmit="return false;"> 

................................... 

    <div class="row"> 
     <div class="col-md-4"> 
      <span class="titel">Samenvatting van de blogpost</span> 
     </div> 
     <div class="col-md-7"> 
      <textarea name="synopsis" value=""></textarea> 
     </div> 
    </div>  

    <div class="row"> 
    <div class="col-md-4"> 
      <span class="titel">De daadwerkelijke inhoud van de blogpost</span> 
     </div> 
     <div class="col-md-7"> 
      <textarea name="inhoud" value=""></textarea> 
     </div> 
    </div> 
    <button class="submit button" name="maakblogpost" type="submit" id="left_btn">Sla uw blog op</button>  
</form> 

我懷疑它的錯誤我自己的代碼中,只是爲了安全起見我張貼在這裏,因爲驗證工作正常時,我有TinyMCE不包括在內。

這是tinymce版本3.5.7順便說一句,這是否與它有關?是否有人知道它是否也出現在新版本(我認爲他們現在是4東西)

回答

2

TinyMCE不會設置textarea的值,直到表單被提交,所以你需要手動調用tinyMCE.triggerSave();之前獲得價值。

+0

謝謝! Triggersave做到了訣竅。我認爲TinyMCE應該調用一個保存函數,因爲它建立在textarea上,這不需要保存。但是,你的答案有竅門。謝謝。 – Dorvalla 2014-10-27 15:58:34