TinyMCE 和 HTML5 表单验证

Question

我在 Rails 应用程序中使用 TinyMCE。在我的表单中，我有一个带有 TinyMCE 的“描述”字段，并且该字段对于表单验证是必需的。

但是，当我尝试提交表单时，由于 HTML5 表单验证的原因，我无法提交表单。我的浏览器（Chrome 和 Firefox）告诉我该字段为空。我还有另一个问题。当 Chrome 显示空字段的对话框时，它出现在我的页面顶部，而不是靠近我的表单字段。

Answer 1

FF 显示所需 fileld 的气泡，但在错误的位置，Chrome 会抛出错误，因为它找不到显示气泡的字段。所以我的解决方案是禁用 TinyMCE 设置的 display:none 样式，并减小字段大小并使其可见隐。这样，浏览器将在该字段旁边显示气泡，因为该字段位于 TinyMCE 编辑器旁边，用户将知道缺少哪些必填字段。

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

Answer 2

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

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

非常感谢创建者，它的工作方式就像奇迹一样:)