TinyMCE 和 HTML5 表单验证答案

【问题标题】：TinyMCE and HTML5 form validationTinyMCE 和 HTML5 表单验证
【发布时间】：2011-12-22 15:02:24
【问题描述】：

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

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

【问题讨论】：

您已经找到解决方案了吗？这：tinymce.com/develop/bugtracker_view.php?id=5671 有点令人沮丧。到现在好像还没有解决。
@Leah 你的链接失效了。我被重定向到 GitHub 并且没有问题 #5671。
@naXa 没关系。自从我发布该评论/链接以来已经一年了。它可能已经被删除了。无论如何感谢您的回复。

【解决方案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;
}

【讨论】：

【解决方案2】：

我在 textareas 中使用了“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);
});

【讨论】：

【解决方案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);
});

非常感谢创作者，它的工作就像奇迹:)

【讨论】：