Summernote::Rails

This fork patches summernote/summernote#1037 with summernote/summernote#2180.

When summernote-rails gem has the update in summernote/summernote#2180, this fork will be obsolete, and should be deleted at that time.

This gem was built to package the assets used in Summernote, the Super Simple WYSIWYG Editor on Bootstrap, for Ruby on Rails version >= 3.1.

https://github.com/summernote/summernote-rails.

The version of summernote-rails is matched with that of summernote editor.

Installation

Add the following gems to your application's Gemfile:

gem 'summernote-rails', 'current version number'
gem 'bootstrap-sass'     # required

And then execute:

$ bundle install

Usage

In app/assets/stylesheets/application.scss,

@import "bootstrap";
@import "summernote";

In app/assets/javascripts/application.js, you should add as follows:

//= require ...
//= require bootstrap
//= require summernote
//= require ...

Basic Example:

<div id="summernote">Hello Summernote</div>

<script type="text/javascript">
  $(document).ready(function() {
    $('#summernote').summernote();
  });
</script>

Or, if your want to use javascript with unobtrusive pattern, you can move the javascript script code lines to app/assets/javascripts/summernote_bootstraped.coffee as follows:

$ ->
  $('#summernote').summernote()

Ideally, you would do it like this:

# This goes into your main javascript file. Customize as you need.

$('[data-provider="summernote"]').each(function(){
  $(this).summernote({ });
})

Or, if you want to code in coffeescript,

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

Then, if you are using simple_form, you can use the :summernote input type. This type simply adds the data-provider="summernote" to the field.

<%= simple_form_for :example do | f | %>
  ...
  <%= f.input :text, as: :summernote %>
  ...
<% end %>

Or, if you prefer haml-style,

= simple_form_for(:example) do | f |
  ...
  = f.input :text, as: :summernote
  ...

If you are not using simple_form, then simply add the data-provider="summernote" to the input field yourself.

i18n Support

If you use i18n, you have to include language files. In app/assets/javascripts/application.js, you should add the following:

// load all locales
//= require summernote/locales

// or

// load specific locale(ko-KR)
//= require summernote/locales/ko-KR

and update summernote option

<div id="summernote">Hello Summernote</div>

<script type="text/javascript">
  $(document).ready(function() {
    $('#summernote').summernote({
      lang: 'ko-KR'
    });
  });
</script>

Also, you can move the above javascript code lines to app/assets/javascripts/summernote_bootstraped.coffee and add as follows:

$ ->
  $('#summernote').summernote
    lang: 'ko-KR'

Plugin

If you want to use a plugin, you have to include the corresponding file. In app/assets/javascripts/application.js, you should add the following:

// load hello plugin
//= require summernote/plugin/hello/summernote-ext-hello

and update summernote option.

<div id="summernote">Hello Summernote</div>

<script type="text/javascript">
  $(document).ready(function() {
    $('#summernote').summernote({
      toolbar : [
        ...
        ['insert', [ 'hello' ]]
        ...
      ]
    });
  });
</script>

Also, you can move the above javascript code lines to app/assets/javascripts/summernote_bootstraped.coffee and add as follows:

  $ ->
    $('#summernote').summernote
      toolbar : [
        ...
        [
          'insert'
            [
              'hello'
            ]
        ]
        ...
      ]

plugin example

Sample projects

For an example, take a look at the example folder in this repository.

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request