TinyMCE y validación de formulario HTML5

Question

Estoy usando TinyMCE en una aplicación de Rails. En mi forma, tengo un campo de "descripción" con TinyMCE y este campo es obligatorio para la validación del formulario.

Pero cuando intento enviar mi formulario, no puedo, debido a la validación del formulario HTML5. Mi navegador (Chrome y Firefox) me dice que el campo está vacío. Y tengo otro problema. Cuando Chrome muestra el cuadro de diálogo para el campo vacío, aparece en la parte superior de mi página, no cerca de mi campo de formulario.

Answer 1

que utiliza la opción "oninit" en las áreas de texto y trabajaron:

oninit: function(editor) { 
    $currentTextArea.closest('form').bind('submit, invalid', function() { 
     editor.save(); 
    }); 
} 

Usted podría tratar de usar onchange evento, pero no funciona correctamente en Firefox.

Mi código completo:

$('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 aparece una burbuja de fileld necesario, pero en el lugar equivocado, Chrome genera un error porque no puede encontrar el campo para mostrar la burbuja .. Así que mi solución es desactivar la visualización : ningún estilo establecido por TinyMCE y reduce el tamaño del campo y oculta su visibilidad. De esta forma, el navegador mostrará una burbuja al lado de este campo, ya que este campo está junto al editor de TinyMCE. El usuario sabrá qué campo requerido falta.

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

Tomé @lucaswxp código y lo cambiaron un poco, porque Firefox estaba lanzando un error ($ this.is no una función, si recuerdo correctamente). También ha cambiado la forma en que se dispara el código de:

$this.tinymce(options); 

a:

tinymce.init(options); 

código completo:

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

Muchas gracias al creador, funcionó como maravilla :)