Проверка формы TinyMCE и HTML5

Question

Я использую TinyMCE в приложении Rails. В моей форме у меня есть поле «описание» с TinyMCE, и это поле обязательно для проверки формы.

Но когда я пытаюсь отправить свою форму, я не могу из-за проверки формы HTML5. Мой браузер (Chrome и Firefox) сообщает, что поле пустое. И у меня есть другая проблема. Когда Chrome отображает диалоговое окно для пустого поля, оно появляется в верхней части моей страницы, а не рядом с полем формы.

Answer 1

FF показывает пузырь для требуемого поля, но в неправильном месте, Chrome выдает ошибку, потому что не может найти поле для отображения пузыря. Поэтому мое решение - отключить отображение: ни один стиль не установлен TinyMCE и уменьшите размер полясделать его видимость скрытой.таким образом, браузер будет показывать пузырь рядом с этим полем, так как это поле рядом с редактором TinyMCE, пользователь будет знать, какое обязательное поле отсутствует.

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

Answer 2

Я использовал опцию «oninit» в textareas и работал:

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);
});

Answer 3

Я взял код @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);
});

Большое спасибо создателю, этоработал как чудо :)