Summernote text Area for rails

Summer note a a text area widget which changes your boring text area field to a rich text editor field
which makes your application more user friendly..

I am showing how you can add to your rails app in this article.

add gem to Gemfile

gem 'summernote-rails', '~> 0.8.10.0'

then, update following files.

app/assets/javascripts/application.js
add following lines.

//= require summernote/summernote-bs4.min
//= require summernote-init

Now find this css file, and update it like so

app/assets/stylesheets/application.css.scss

@import "summernote-bs4";
@import "summernote-custom-theme.min";

Finally add this coffee script to your javascript directory

$(document).on 'turbolinks:load', ->
  $('[data-provider="summernote"]').each ->
    $(this).summernote
      height: 300

Fun part How to use it ?

In your form fields, just add data-provider to summernote
That's it, and it will change your regular boring text area field to what you have seen in above image.

 <div class="form-group">
     <%= f.label :vote_message %>
    ## Boring Text Area
    <%= f.text_area :vote_message , class: 'form-control'%>
    ## Awesome Text Area
    <%= f.text_area :vote_message , 'data-provider': :summernote, class: 'form-control'%>
   </div>