TinyMCE和HTML5表單驗證

我在Rails應用程序中使用TinyMCE。在我的表單中，我有一個TinyMCE的「描述」字段，這個字段對於表單驗證是強制性的。TinyMCE和HTML5表單驗證

但是當我嘗試提交我的表單時，由於HTML5表單驗證，我無法提交。我的瀏覽器（Chrome和Firefox）告訴我該字段是空的。我還有另外一個問題。當Chrome顯示空白字段的對話框時，它會顯示在我的頁面頂部，而不是我的表單字段附近。

2011-12-22 Mathieu Mahé

您是否已經找到了解決方案？這：http://www.tinymce.com/develop/bugtracker_view.php?id=5671是有點不安。看來它現在還沒有解決。 – Leah

@Leah你的鏈接不工作。我被重定向到GitHub，沒有問題＃5671。 – naXa

@naXa沒關係。自從我發表評論/鏈接已經過去了一年。它可能已經被刪除了。無論如何，感謝您的迴應。 – Leah

我用「的OnInit」選項，在文本域和工作：

oninit: function(editor) { 
    $currentTextArea.closest('form').bind('submit, invalid', function() { 
     editor.save(); 
    }); 
}

你可以嘗試使用onChange事件，但它不會在Firefox中正常工作。

我的完整代碼：

$('textarea.tinymce').each(function(){ 
    var options = { 
     theme : "advanced", 
     skin : "cirkuit", 
     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", theme_advanced_buttons1 :"formatselect,fontsizeselect,forecolor,|,bold,italic,strikethrough,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,|,link,unlink,|,spellchecker", 
     theme_advanced_buttons2 : "", 
     theme_advanced_buttons3 : "", 
     theme_advanced_buttons4 : "", 
     theme_advanced_toolbar_location : "top", 
     theme_advanced_toolbar_align : "left", 
     theme_advanced_statusbar_location : "bottom", 
     theme_advanced_resizing : true 
    }, 
    $this = $(this); 

    // fix TinyMCE bug 
    if ($this.is('[required]')) { 
     options.oninit = function(editor) { 
      $this.closest('form').bind('submit, invalid', function() { 
       editor.save(); 
      }); 
     } 
    } 
    $this.tinymce(options); 
});

來源

2012-02-15 05:36:31 lucaswxp

FF顯示所需fileld，但在錯誤的地方泡沫，鉻拋出一個錯誤，因爲它無法找到現場展示泡沫。所以我的解決辦法是禁用顯示：TinyMCE設置的無風格，並減小字段大小並隱藏其可見性。通過這種方式，瀏覽器將在此字段旁邊顯示氣泡，因爲此字段位於TinyMCE編輯器旁邊，用戶將知道缺少必填字段。

textarea.tinymce { 
 
\t background: transparent; 
 
\t border: none; 
 
\t box-shadow: none; 
 
\t display: block !important; 
 
\t height: 0; 
 
\t resize: none; 
 
\t width: 0; 
 
\t visibility: hidden; 
 
}

來源

2015-09-08 11:01:08 Faraz

我把@lucaswxp代碼，並改變了它一下，因爲Firefox中被拋出一個錯誤（$ this.is不是一個函數，如果我記錯的話）。此外，我改變了它從觸發代碼的方式：

$this.tinymce(options);

到：

tinymce.init(options);

全碼：

$(window).load(function() { 

var options = { 
     selector: 'textarea', 
     skin: "lightgray" 
    }, 
    $this = $(this); 

    // fix tinymce bug 
    if ($this.is('[required]')) { 
     options.oninit = function(editor) { 
      $this.closest('form').bind('submit, invalid', function() { 
       editor.save(); 
      }); 
     } 
    } 

    tinymce.init(options); 
});

非常感謝造物主，它的工作就像奇蹟:)

來源

2015-12-08 19:42:05

TinyMCE和HTML5表單驗證

回答

相關問題