Rails:ブラウザのテキストエリアでboldとかitalicとか文字サイズ・色変更をする方法（5分で導入）


サンプルアプリ（herokuの無料なので開くまで時間かかるかもです）
https://summernote.herokuapp.com/

【動作イメージ】
テキストエリアを拡張して太字、アンダーライン、色などの編集ができます。
![8月-08-2018 16-43-32.gif](https://qiita-image-store.s3.amazonaws.com/0/145707/c6185e50-a5ca-f89f-76f8-18ec99ce80a0.gif)


#導入方法
基本は以下アドレスのreadmeに書いてあります。
https://github.com/summernote/summernote-rails

#railsプロジェクトの作成、scaffold作成

```terminal
$ rails new summernote
$ rails g scaffold book title:string content:text
$ rails db:migrate
```


##gemの導入

```ruby:gemfile.rb
gem 'rails', '~> 5.2.0.rc1'
gem 'jquery-rails', '~> 4.3.1'
gem 'bootstrap', '~> 4.0.0'
gem 'summernote-rails', '~> 0.8.10.0'
gem 'simple_form', '~> 3.5.1'
```
railsの部分、5.2.0で動くかと思ったらrc1がないと動きませんでした。

```terminal
$ bundle install
```

##css > scss

application.css > application.scssにリネーム後、
以下追加。

```scss:application.scss
@import "bootstrap";
@import "summernote-bs4";
@import "summernote-custom-theme.min";
```

```scss:application.scss追加後
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

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

##js
以下を追加。

```javascript: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 .
```

```javascript:application.js追加後
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require summernote/summernote-bs4.min
//= require summernote-init
//= require activestorage
//= require turbolinks
//= require_tree .
```

#coffee script
以下ファイルを作成後、中身をいじる。
app/assets/javascripts/summernote-init.coffee

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

#routes.rb
rootを追加

```ruby:routes.rb
Rails.application.routes.draw do
  resources :books
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  root "books#index"
end
```

#_form.html.haml
元の中身を全て削除、以下を追加。

```haml:_form.html.haml
= form_for(book) do |form|
  .field.m-3
    = form.label :text
    = form.text_area :content, 'data-provider': :summernote
    .actions
      = form.submit
```

#show.html.haml

html_safeというメソッドでhtmlnの見た目にしています。

```
= @book.content.html_safe
```

```haml:show.html.haml
%p#notice= notice
%p
  %strong Title:
  = @book.title
%p
  %strong Content:
  .content{style: "border: solid 2px gray; padding: 10px; margin: 10px;"}
    = @book.content.html_safe
= link_to 'Edit', edit_book_path(@book)
|
= link_to 'Back', books_path
```