TinyMCEとHTML5フォームの検証

Question

私はTinyMCEをRailsアプリケーションで使用しています。私のフォームでは、TinyMCEの「説明」フィールドがあり、このフィールドはフォームの検証に必須です。

フォームを送信しようとすると、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); 
}); 

Answer 2

だから私のソリューションは無効表示..ですFFが必要fileldためのバブルを示すが、それはバブルを表示するフィールドを見つけることができないので、間違った場所で、Chromeはエラーをスローします：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; 
 
}

Answer 3

（私はそれを正しくリコール場合、$ this.isない機能を）Firefoxがエラーを投げていたので、私は、@lucaswxpコードを取り、それを少し変更しました。

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

多くの感謝を、それは不思議のように働いた:)