Summernote duplicating fields on edit form

[summernote]

Summernote duplicating fields on edit form

[luciuschoi]

I have just cloned your repo and replaced the whole meds.coffee file as follows:

$ ->
  $('[data-provider="summernote"]').each ->
    $(this).summernote
      height: 100

It also worked properly on editing an presisted record and so I could see the multiple text fields held each corresponding attribute value correctly.

If you omit the height option line, summernote editor will not be shown.

Good luck!

[luciuschoi]

In meds.coffee file of your repo, you called summernote editor twice for individual fields.

First call is as follows:

$ ->
  $('[data-provider="summernote"]').each ->
    $(this).summernote()

Second calls are:

$ ->
  # 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"

Therefore, you must remove code lines for second calls.

If you want to add some options to a certain summernote editor, you must not add as: :summernote option for corresponding field input in form view file and call summernote editor for it additionally in meds.coffee.

So, you may modify the form view file(edit.html.erb) as follows:

<div class = "container">
<fieldset>
  </p><h2>Edit Medicine</h2></p>
  <%# if user_signed_in? && current_user.is_admin == true %>
  <%= simple_form_for @med, class: "form-horizontal" do |f| %>
    <div class="form-group">
    <%= f.input :brand_name, required: true %>
    </div>

    <div class="form-group">
    <%= f.input :generic_name, required: true %>
    </div>

    <div class="form-group">
    <%= f.input :description, as: :summernote, :id => 'description' %>
    </div>

    <div class="form-group">
    <%= f.input :reactions, as: :summernote, :id => 'reactions' %>
    </div>

    <div class="form-group">
    <%= f.input :interactions, as: :summernote, :id => 'interactions' %>
    </div>

    <div class="form-group">
    <%= f.input :implementation, as: :summernote, :id => 'implementation' %>
    </div>

    <div class="form-group">
    <%= f.input :availability, as: :summernote, :id => 'availability' %>
    </div>

    <div class="form-group">
    <%= f.input :caution, as: :summernote, :id => 'caution' %>
    </div>

    <div class="form-group">
    <%= f.input :warnings, :id => 'warnings' %>
    </div>

    <%= f.button :submit, class: "btn btn-primary" %> </div>
  <% end %>
  <%# end %>
</fieldset>
</div>

(In the above, you could find the absence of as: :summernote option for f.input :warnings, :id => 'warnings')

and also meds.coffee file as follows:

$ ->
  $('[data-provider="summernote"]').each ->
    $(this).summernote
      height:50

  summer_note7 = $('#med_warnings')
  summer_note7.summernote
    # to set options
    height:300
    codemirror:
      lineNumbers: true
      tabSize: 2
      theme: "solarized light"

(In the above, you could find the additional code line height:50.)

I wish it helps you. Good luck~

[rasool-sb]

@luciuschoi 👍

[jtansley]

Thank you so much for the thorough explanation! This worked perfectly!! I learned a great deal here.