Re Initialization issue with nested-form

[furiabhavesh]

I am facing some reinitialization issue while using tinymce-rails alongwith nested-form.

[furiabhavesh]

It worked when I coded it as below

$(document).on('nested:fieldAdded:products', function(event){
    var field = event.field;
    var textarea = field.find("textarea");
    convert_textarea_to_editor(textarea);
});
var textarea = $(".bulk .fields textarea");

/*I added this additional check because even if textarea length was zero, tinyMCE init method was converting normal textarea (inspite of using 'mode:specific_textareas') to editor*/
if(textarea.length > 0){
  convert_textarea_to_editor(textarea); /*This might be an additional bug that its converting non-targeted textareas to editor*/
}

function convert_textarea_to_editor(textarea){
  textarea.addClass(textarea.attr("id")+"-tinymce");
  tinyMCE.init({
    "theme_advanced_toolbar_align":"left",
    "theme":"advanced",
    "mode":"specific_textareas",
    "editor_selector":textarea.attr("class"),
    "theme_advanced_toolbar_location":"top",
    "theme_advanced_buttons1" : "bold, italic, underline, separator, bullist, numlist, separator, outdent, indent, separator, undo, redo, separator, hr, separator, forecolor, backcolor"
  });
}

Also, I removed the following line from my view

<%= tinymce :simple %>

[fahim-patel]

@furiabhavesh @spohlenz facing same issue. Using Rails 4 with 'cocoon' gem for nested form. Editor loading in starting 2 nested forms but after that normal text area appears in each new nested forms .....

Thanks! in advance.

[spohlenz]

@fahim-patel You'll likely need to reinitialize TinyMCE (by calling tinyMCE.init) after new textareas are added to the DOM.

[fahim-patel]

@spohlenz Ok.Will try this.Should I copy above code also ?

[furiabhavesh]

@fahim-patel : The above code fix is specific to my app. You may not have to copy all the code. Understand it and extract accordingly.

[fahim-patel]

@spohlenz @furiabhavesh Nothing working . I followed https://github.com/spohlenz/tinymce-rails Please check below code. Thanks! in advance...

main_form

 <%= f.fields_for :faq_items do |subform| %>
    <%= render 'faq_item_fields', :f => subform %>
  <% end %>
  <%= link_to_add_association 'Add new Faq Item', f, :faq_items %>

partial_form

<script>
  $(document).ready(function(){
     tinyMCE_init();
  });
</script>
<div class="nested-fields">
  <div class="field">
       FAQ item -    <%= link_to_remove_association "Remove this Faq Item", f %>
       <div class='row'>
          <label>Content
            <%= f.text_area :content, :class => "tinymce", :rows => 10, :cols => 120, id: "tinyMCEContent_#{rand(10**10)}" %>
            <%= tinymce %>
          </label>
      </div>
  </div>
</div>

[spohlenz]

Not too familiar with cocoon but you might want to look into adding the TinyMCE initialization code to a cocoon:after-insert event. e.g.

  $('.nested-fields').on('cocoon:after-insert', function(e, insertedItem) {
    tinyMCE_init();
  });

[fahim-patel]

@furiabhavesh @spohlenz Trying suggestions.