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表单验证

回答

相关问题