TinyMCE和HTML5表单验证

Question

我在Rails应用程序中使用TinyMCE.在我的表单中,我有一个TinyMCE的"description"字段,该字段对于表单验证是必需的.

但是当我尝试提交表单时,我不能,因为HTML5表单验证.我的浏览器(Chrome和Firefox)告诉我该字段为空.我还有另外一个问题.当Chrome显示空字段的对话框时,它会显示在我的页面顶部,而不是我的表单字段附近.

Answer 1

我在文本区域中使用了“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);
});