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.
The version of summernote-rails is matched with that of original summernote editor.
Note: From Rails 6+, webpack is used as the default javascript package(or module) bundler. Therefore, without summernote-rails, you can use the summernote javascript package using webpacker gem in Rails 6+. If you want to know about it more, you can visit here.
Environments:
- Ruby 2.6.5
- Gems :
- Rails
- Bootstrap
- Simple Form
Add the following gems to your application's Gemfile:
gem 'rails'
gem 'jquery-rails'
gem 'bootstrap'
gem 'simple_form'
gem 'summernote-rails', '~> 0.8.12'
And then execute:
$ bundle install
Note: When you use simple_form with bootstrap, you should execute
rails g simple_form --bootstrap
in terminal. Especially, if you want to use Bootstrap version 4, you should create config/initializers/simple_form_bootstrap4.rb which you can reference in the example project in this repository.
In app/assets/stylesheets/application.scss,
@import "bootstrap";
@import "summernote-bs4";
In app/assets/javascripts/application.js, you should add as follows:
//= require jquery
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require summernote/summernote-bs4.min
//= require activestorage
//= require turbolinks
//= require_tree .
Basic Example:
After creating app/assets/javascripts/summernote-init.coffee, you can write codes as follows:
$(document).on 'turbolinks:load', ->
$('[data-provider="summernote"]').each ->
$(this).summernote
height: 300
And you should require this file in application.js.
//= require jquery
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require summernote/summernote-bs4.min
//= require summernote-init
//= require activestorage
//= require turbolinks
//= require_tree .
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
...
Note: If you are not using simple_form gem, then simply add the
data-provider="summernote"
to the input field yourself.
When you use form_with
helper,
<%= form_with(model: post, local: true) do |form| %>
・・・
<div class="field">
<%= form.label :text %>
<%= form.text_area :text, 'data-provider': :summernote %>
</div>
・・・
<% end %>
Or when you use form_for
helper,
<%= form_for(post) do |form| %>
・・・
<div class="field">
<%= form.label :text %>
<%= form.text_area :text, 'data-provider': :summernote %>
</div>
・・・
<% end %>
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/lang
// or
// load specific locale(ko-KR)
//= require summernote/lang/summernote-ko-KR
and update summernote option
$(document).on 'turbolinks:load', ->
$('[data-provider="summernote"]').each ->
$(this).summernote
lang: 'ko-KR'
height: 300
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.
$(document).on 'turbolinks:load', ->
$('[data-provider="summernote"]').each ->
$(this).summernote
lang: 'ko-KR'
height: 300
toolbar : [
...
[
'insert'
[
'hello'
]
]
...
]
For an example, take a look at the example
folder in this repository.
In this example, you can learn how to insert/delete images in summernote editor.
- 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