在TinyMCE編輯器中使用jQuery Validate插件

我正在使用jQuery的Validate插件實現客戶端驗證，並且簡短地介紹了使用TinyMCE編輯器組件的表單字段。這在我的表單字段的包含標記下呈現了令人難以置信的複雜控制樹，其中包括用於實際編輯區域的iframe以及textarea元素。我不能直接訪問的textarea，所以我打電話.validate()前添加「必要」的屬性，如下圖所示：在TinyMCE編輯器中使用jQuery Validate插件

jQuery(function() { 
    jQuery("#wpsm_body").addClass("required"); 
    jQuery("#wpsm-send-mail") 
      .validate(
        { 
         errorContainer : "#wpsm-top-error-container, #wpsm-bottom-error-container", 
         errorLabelContainer : "#wpsm-top-error-container ul", 
         wrapper : "li", 
         messages : { 
          wpsm_from : "The message has no 'From' address. The administrator can set a default for this on the SuperMail 'Settings' page.", 
          wpsm_subject : "The message has no subject.", 
          wpsm_body : "The message has no body.", 
          wpsm_text : "The message has no body." 
         } 
        }); 
});

但是，我沒有得到任何客戶端驗證錯誤，當我提交表單，即使空wpsm_body。

對於背景，這是一個WordPress插件，TinyMCE是由wp_editor函數渲染的，儘管我懷疑這會造成太大的差別。

加入：儘管我不相信這會有很大幫助，但這裏是呈現給瀏覽器的HTML。 TinyMCE在此之後生成的HTML長度爲400行，並且不相關。

<form id="wpsm-send-mail" action="theform.php" method="POST" enctype="multipart/form-data"> 
<div id="wp-wpsm_body-wrap" class="wp-editor-wrap tmce-active"> 
    <link rel='stylesheet' id='editor-buttons-css' href='http://localhost/wordpress/wp-includes/css/editor-buttons.dev.css?ver=20111114' 
     type='text/css' media='all' /> 
    <div id="wp-wpsm_body-editor-tools" class="wp-editor-tools"> 
     <a id="wpsm_body-html" class="hide-if-no-js wp-switch-editor switch-html" onclick="switchEditors.switchto(this);"> 
      HTML</a> <a id="wpsm_body-tmce" class="hide-if-no-js wp-switch-editor switch-tmce" 
       onclick="switchEditors.switchto(this);">Visual</a> 
     <div id="wp-wpsm_body-media-buttons" class="hide-if-no-js wp-media-buttons"> 
      <a href="http://localhost/wordpress/wp-admin/media-upload.php?post_id=0&#038;TB_iframe=1" 
       class="thickbox add_media" id="wpsm_body-add_media" title="Add Media" onclick="return false;"> 
       Upload/Insert 
       <img src="http://localhost/wordpress/wp-admin/images/media-button.png?ver=20111005" 
        width="15" height="15" /></a></div> 
    </div> 
    <div id="wp-wpsm_body-editor-container" class="wp-editor-container"> 
     <textarea class="wp-editor-area" rows="20" cols="40" name="wpsm_body" id="wpsm_body"></textarea></div> 
</div> 
</form>

唯一的相關項目在這裏是form和textarea，他們id屬性。

來源

2012-01-11 ProfK

一些HTML將是很好的代碼 – ori 2012-01-11 08:43:00

@ori，看我的編輯。我已經添加了可以添加的HTML。 – ProfK 2012-01-11 09:40:22

假設您已經包含了tinyMCE的js文件和你正在做使用tinyMCE

繼客戶端的驗證是驗證TinyMCE的編輯

<script> 
    $(document).ready(function() { 

     var $btn = $("#<%=btnSubmit.ClientID %>"); 
     var $txtEditor = $(".txtEditor"); 

     $btn.click(function() { 
      if (tinyMCE.get($txtEditor.attr("id")).getContent() == "") { 
       alert("hi"); 
      } 
      else { 
       alert("bye"); 
      } 
      return false; 
     }) 

    }); 

</script> 


<div> 
<asp:TextBox id="TextBox1" runat="server" TextMode="MultiLine" CssClass="txtEditor212"></asp:TextBox> 
      <asp:TextBox id="txtEditor" runat="server" TextMode="MultiLine" CssClass="txtEditor"></asp:TextBox> 
     </div> 
     <div> 
     <asp:Button id="btnSubmit" runat="server" Text="Save" onclick="btnSubmit_Click" /> 

     </div> 
</asp:Content> 
</div>

來源

2012-03-03 13:46:57 Murtaza

我不確切知道在Wordpress中如何使用TinyMCE。

但是我之前使用過TinyMCE，並且textarea在您在富文本編輯器中進行編輯時（它不會在表單提交時更新）而不會更新。當我需要（ajax）時，我使用下面的代碼來更新textarea：

form.find('textarea.rich').each(function() { 
    var textarea = $(this); 
    var taeditor = tinyMCE.get(textarea.attr('id')); 
    if (taeditor) 
     textarea.val(taeditor.getContent()); 
});

希望這有助於。

來源

2012-01-12 12:25:48 ori

謝謝，但我的問題不是textarea沒有得到更新。即使沒有更新，即保持空白，我也沒有驗證錯誤。 – ProfK 2012-01-12 15:19:13

你是對的，我的回答可能會幫助下一個問題...除了你的代碼看起來應該可以工作，所以一些好的舊調試的順序：當wp創建編輯器時textarea保持空白，wp是否重複textarea的ID？等等 – ori 2012-01-12 15:46:14

在TinyMCE編輯器中使用jQuery Validate插件

回答

相關問題