Summernote Ruby Gem not working with form (RoR)

Question

I have recently included the Summernote gem in my Gemfile and included all necessary lines in .js and .css files (intructions found here http://rorlab.github.io/summernote-rails/)

I want to use Summernote to edit my "steps" text_area in my Recipe database. The form works perfectly without Summernote (see image below)

However when I assign my field as follows with added 'summernote' class:

<%= f.text_field :steps, class: 'summernote', placeholder: "Add step", id: "add_steps" %>

I am shown the summernote output but my text inout is missing and the submit button will not work.

Any Ideas?

In the instructions in the link I was told to add to the recipe.js.coffee script. I added the following:

summer_note = $('add_steps')

summer_note.summernote

height:300  
 toolbar: [
             ['insert', ['picture', 'link']], // no insert buttons
             ["table", ["table"]], 
             ["style", ["style"]], 
             ["fontsize", ["fontsize"]], 
             ["color", ["color"]], 
             ["style", ["bold", "italic", "underline", "clear"]], 
             ["para", ["ul", "ol", "paragraph"]], 
             ["height", ["height"]], 
             ["help", ["help"]]
         ]

summer_note.code summer_note.val()


summer_note.closest('form').submit ->
 alert $('add_steps').code()[0]
summer_note.val summer_note.code()[0]
true

And my Javascript in the _step_form.html.erb file is:

<script>
$(document).ready(function() {
  $('.summernote').summernote({
  toolbar: [
    //['style', ['style']], // no style button
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    //['insert', ['picture', 'link']], // no insert buttons
    //['table', ['table']], // no table button
    //['help', ['help']] //no help button
  ]
});
});
</script>

I am a newbie to RoR so any help appreciated! Thank you. Please let me know if I am missing something.

Answer 1

You need to add a hashtag to the 'add_steps' ID.

That is, change this selector:

summer_note = $('add_steps')

to this:

summer_note = $('#add_steps')