I have two Rails forms (edit and new) that have multiple text areas. I'm trying to get all of them to use Summernote, but only one of them appears to use the javascript (the last text area if that makes a difference). How can I change it so all text areas use Summernote?
Here's the relevant code:
coffee javascript file:
$ ->
# to set summernote object
# You should change '#med_description' to your textarea input id
summer_note = $('#med_description')
summer_note2 = $('#med_reactions')
summer_note3 = $('#med_interactions')
summer_note4 = $('#med_implementation')
summer_note5 = $('#med_availability')
summer_note6 = $('#med_caution')
summer_note7 = $('#med_warnings')
# to call summernote editor
summer_note.summernote
summer_note2.summernote
summer_note3.summernote
summer_note4.summernote
summer_note5.summernote
summer_note6.summernote
summer_note7.summernote
# to set options
height:300
codemirror:
lineNumbers: true
tabSize: 2
theme: "solarized light"
# to set code for summernote
summer_note.code summer_note.val()
summer_note2.code summer_note.val()
summer_note3.code summer_note.val()
summer_note4.code summer_note.val()
summer_note5.code summer_note.val()
summer_note6.code summer_note.val()
summer_note7.code summer_note.val()
# to get code for summernote
summer_note.closest('form').submit ->
# alert $('#med_description').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note2.closest('form').submit ->
# alert $('#med_reactions').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note3.closest('form').submit ->
# alert $('#med_interactions').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note4.closest('form').submit ->
# alert $('#med_implementation').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note5.closest('form').submit ->
# alert $('#med_availability').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note6.closest('form').submit ->
# alert $('#med_caution').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note7.closest('form').submit ->
# alert $('#med_warnings').code()
summer_note.val summer_note.code()
true
edit.html.erb:
<%= form_for(@med) do |f| %>
<%= f.label :brand_name, "Name of the medicine:" %>
<div><%= f.text_field :brand_name, required: true %></div>
<%= f.label :generic_name %>
<div><%= f.text_field :generic_name, required: true %></div>
<%= f.label :description %>
<div><%= f.text_area :description, as: :summernote, :id => 'description' %></div>
<%= f.label :reactions %>
<div><%= f.text_area :reactions, as: :summernote, :id => 'reactions' %></div>
<%= f.label :interactions %>
<div><%= f.text_area :interactions, as: :summernote, :id => 'interactions' %></div>
<%= f.label :implementation %>
<div><%= f.text_area :implementation, as: :summernote, :id => 'implementation' %></div>
<%= f.label :availability %>
<div><%= f.text_area :availability, as: :summernote, :id => 'availability' %></div>
<%= f.label :caution %>
<div><%= f.text_area :caution, as: :summernote, :id => 'caution' %></div>
<%= f.label :warnings %>
<div><%= f.text_area :warnings, as: :summernote, :id => 'warnings' %></div>
<div><%= f.submit "Save changes", class: "btn btn-primary" %> </div>
<% end %>
new.html.erb:
<%= simple_form_for @med, class: "form-horizontal", method: :post do |f| %>
<div class="form-group">
<%= f.label :brand_name, "Name of the medicine:" %>
<%= f.input :brand_name, required: true %>
</div>
<div class="form-group">
<%= f.label :generic_name %>
<%= f.input :generic_name, required: true %>
</div>
<div class="form-group">
<%= f.label :description %>
<%= f.input :description, as: :summernote, :id => 'description' %>
</div>
<div class="form-group">
<%= f.label :reactions %>
<%= f.input :reactions, as: :summernote, id: 'reactions' %>
</div>
<div class="form-group">
<%= f.label :interactions %>
<%= f.input :interactions, as: :summernote, id: 'interactions' %>
</div>
<div class="form-group">
<%= f.label :implementation %>
<%= f.input :implementation, as: :summernote, id: 'implementation' %>
</div>
<div class="form-group">
<%= f.label :availability %>
<%= f.input :availability, as: :summernote, id: 'availability' %>
</div>
<div class="form-group">
<%= f.label :caution %>
<%= f.input :caution, as: :summernote, id: 'caution' %>
</div>
<div class="form-group">
<%= f.label :warnings %>
<%= f.input :warnings, as: :summernote, id: 'warnings' %>
</div>
<%= f.button :submit, class: "btn btn-primary" %>
<% end %>
Thanks!
EDIT: The Summernote github page (https://github.com/summernote/summernote-rails) shows the following code. I think it might be the best way to fix my issue. It looks like it loops through any field that has as: :summernote:
$ ->
$('[data-provider="summernote"]').each ->
$(this).summernote()
Is this the right answer? If so, how do I implement it?
The following code worked:
$ ->
$('[data-provider="summernote"]').each ->
$(this).summernote()
I placed that code above everything else I had in the coffee file and it worked fine.