Symfony2 TinymceBundle

I created an ArticleController to render a form wi开发者_如何转开发th fields: title (text) and content (textarea), and everything works well until I add class="tinymce" to the textarea field in the template. then I get this error: 'An invalid form control with name='form[content]' is not focusable.' I followed the documentation to add the 'class' attribute and the editor renders fine in the browser, its just when I submit the form I get the error.

Any ideas what could be causing this?

{{ form_errors(form) }}

{{ form_widget(form.title) }}
{{ form_widget(form.content, { 'attr': {'class': 'tinymce' }} ) }}

{{ form_rest(form) }}

<input type="submit" />

Apparently there is an issue with chrome regarding the attribute 'required = "true"'. http://code.google.com/p/chromium/issues/detail?id=45640

I added 'formnovalidate = "true"' attribute to the submit button input field and it works fine

tinyMCE.init({
    mode : "specific_textareas",
    editor_selector : "mceEditor",
    setup : function(ed) {
          ed.onChange.add(function(ed, l) {
                  tinyMCE.activeEditor.getElement().value = tinyMCE.activeEditor.getContent();
          });
   }
});

I tried the suggestion from Musefan, and it only partly worked, but it got me experimenting.

Here's something that works for me. Tested on Firefox 10.0.1, IE9, and Chrome 17.

Where I'm setting tinyMCE.activeEditor.getElement().value = 'test' it can be any value other than ''. Not sure why that's true.

tinyMCE.init({
    mode : "specific_textareas",
    editor_selector : "tinymce",

    setup : function(ed)
    {
        // This is needed when the textarea is required for html5
        ed.onInit.add(function(ed)
        {
                      tinyMCE.activeEditor.getElement().value = 'test'
        });
    },

});

The error happens when the WYSIWYG hides your textarea but the textarea is set to required field. You can set 'required' => false on your content textarea control when you build the form in order to disable browser's required check.

$builder->add("content", "textarea", array('required' => false));

tinyMCE will normally update the contents of the hidden textarea during the onsubmit-Event. This event, however, is not fired when html5-validation is used and any input is invalid.

Therefore you will never get an empty and required textarea with tinyMCE on top to validate correctly unless you enforce the textarea to be updated before html5-validation starts.

I built a workaround for this bug which hopefully will be merged into the original repo anytime soon: https://github.com/stfalcon/TinymceBundle/pull/19

Building on musefans's response above.

I came here because I'm using Simple Form, Twitter Bootstrap, and tinymce-rails. If you're using tinymce-rails this setup you need to edit the line noted in is answer to your tinymce.yml file. Your final file should look similar to this.

theme_advanced_toolbar_location: top 
theme_advanced_toolbar_align: left
theme_advanced_statusbar_location: bottom
theme_advanced_buttons3_add:
  - tablecontrols
  - fullscreen
plugins:
  - table
  - fullscreen
mode:
  - specific_textareas