Dragon Arrow written by Tatsuya Nakaji, all rights reserved animated-dragon-image-0164

wysiwyg-rails

updated on 2018-12-09

イメージ

wysiwyg-railsの導入


前提: bootstrap,  fontawesome が入っている


1. gemのインストール

#Gemfile
...
gem 'wysiwyg-rails'

bundle install


2. wysiwyg-railsのjsを読み込む

(最低限)

#app/assets/javascripts/application.js
...
//= require froala_editor.min.js
...


他にも自分が使いたい機能に合わせてjsを読み込もう!! (それぞれがなのを表すかは公式ドキュメントをチェック!!)


下は私の例

#app/assets/stylesheets/application.scss

...
//= require froala_editor.min.js
//= require plugins/align.min.js
//= require plugins/char_counter.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/colors.min.js
//= require plugins/emoticons.min.js
//= require plugins/entities.min.js
//= require plugins/file.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/fullscreen.min.js
//= require plugins/help.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.min.js
//= require plugins/inline_style.min.js
//= require plugins/line_breaker.min.js
//= require plugins/link.min.js
//= require plugins/lists.min.js
//= require plugins/paragraph_format.min.js
//= require plugins/paragraph_style.min.js
//= require plugins/print.min.js
//= require plugins/quick_insert.min.js
//= require plugins/quote.min.js
//= require plugins/save.min.js
//= require plugins/table.min.js
//= require plugins/special_characters.min.js
//= require plugins/url.min.js
//= require plugins/video.min.js
//= require activestorage
//= require third_party/image_aviary.min.js
//= require third_party/spell_checker.min.js
//= require languages/ja.js
 ...


3. wysiwyg-railsのcssを読み込む

(最低限)

#app/assets/stylesheets/application.scss

...
 @import 'froala_editor.min.css';
 @import 'froala_style.min.css';
 ...


下は私の例

@import 'form';
@import 'froala_editor.min.css';
@import 'froala_style.min.css';
@import 'plugins/char_counter.min.css';
@import 'plugins/code_view.min.css';
@import 'plugins/colors.min.css';
@import 'plugins/emoticons.min.css';
@import 'plugins/file.min.css';
@import 'plugins/fullscreen.min.css';
@import 'plugins/help.min.css';
@import 'plugins/image_manager.min.css';
@import 'plugins/image.min.css';
@import 'plugins/line_breaker.min.css';
@import 'plugins/quick_insert.min.css';
@import 'plugins/special_characters.min.css';
@import 'plugins/table.min.css';
@import 'plugins/video.min.css';
@import 'bootstrap-sprockets';
@import 'bootstrap';
@import 'third_party/spell_checker.min.css';
// @import 'languages/ja.css'; これを入れるとerrorになったのでコメントしました
// @import 'third_party/embedly.min.css'; embedlyは最近になってapikeyを有料で取得しなければならなくなったみたい... http://embed.ly/pricing


4. コントローラ作成

#app/controllers/articles_controller.rb

class ArticlesController < ApplicationController
  before_action :find_article, only: [:edit, :update, :show, :destroy]
  before_action :require_login, except: [:index, :show]

  # 一覧 
  def index
    @articles = Article.all
  end
  
  # 新規
  def new
    @article = Article.new
  end

  # 作成
  def create
    @article = Article.new(article_params)
    if @article.save
      flash[:notice] = "作成されました"
      redirect_to article_path(@article)
    else
      flash[:alert] = "エラーが発生しました"
      render :new
    end
  end

  # 編集
  def edit
  end

  # 更新
  def update
    if @article.update_attributes(article_params)
      flash[:notice] = "更新されました"
      redirect_to article_path(@article)
    else
      flash[:alert] = "エラーが発生しました"
      render :edit
    end
  end

  # 詳細
  def show
  end

  # 削除
  def destroy
    if @article.destroy
      flash[:notice] = "削除されました"
      redirect_to articles_path
    else
      flash[:alert] = "エラーが発生しました"
    end
  end

  private

  def article_params
    params.require(:article).permit(:title, :body)
  end

  def find_article
    @article = Article.find(params[:id])
  end
end

ここで

before_action :require_login は, clearanceという認証システムのメソッドです。

deviseでいう

before_action :authenticate_user! と同じです

認証システムを導入してない方はシカトして結構です


4. view( index.html.erb, new.html.erb, show.html.erb, _form.html.erb, edit.html.erb )を作る


_form.html.erb

#app/views/articles/_form.html.erb

# simple_formを導入してない方は普通に form_with とか form_for で好きな様に作ってもらってOK!

<%= simple_form_for (@article) do |f| %>
  <% if @article.errors.any? %>
    <div id="error_explanation">
      <h2>
        <%= "#{pluralize(@article.errors.count, "error")} によりこの投稿は保存されませんでした" %>
      </h2>
      <ul>
        <% @article.errors.full_messages.each do |msg| %>
          <li>
            <%= msg %>
          </li>
          <% end %>
      </ul>
    </div>
  <% end %>

  <div class="form-group">
    <%= f.input :title, class: "form-control" %>
  </div>

  <div class="form-group">
    <%= f.label :body %>
    <%= f.text_area :body, id: "wysiwyg" %>
  </div>

  <div class="form-group">
    <%= f.button :submit %>
  </div>
<% end %>
<!-- script for FROALA-WYSIWYG -->
<script>
  $('#wysiwyg').froalaEditor({
    inlineMode: false,
    heightMin: '200px',
    toolbarButtons: ['bold', 'italic', 'underline'],
    language: 'ja',
  })
</script>

ここで, 私のjs,cssを真似た人は

<script>
  $('#wysiwyg').froalaEditor({
    inlineMode: false,
    heightMin: '200px',
    toolbarButtons: ['bold', 'italic', 'underline'],
  })
</script> の部分は

<script>
$(function() {
$('#wysiwyg').froalaEditor({
language: 'ja',
heightMin: 500,
heightMax: 1000,
})
});
</script>

に置き換えてください(jsとcssで読み込んだボタンと機能が勝手に適用されます!!)



ちなみに、

<!-- <script>
$(function() {
$('#wysiwyg').froalaEditor({
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'color', '|', 'paragraphFormat', 'align', 'undo', 'redo', 'html'],
colorsBackground: [
'#15E67F', '#E3DE8C', '#D8A076', '#D83762', '#76B6D8', 'REMOVE',
'#1C7A90', '#249CB8', '#4ABED9', '#FBD75B', '#FBE571', '#FFFFFF'
],
colorsDefaultTab: 'background',
colorsStep: 6,
colorsText: [
'#15E67F', '#E3DE8C', '#D8A076', '#D83762', '#76B6D8', 'REMOVE',
'#1C7A90', '#249CB8', '#4ABED9', '#FBD75B', '#FBE571', '#FFFFFF'
]
})
});
</script> -->

みたいに一個一個指定して使いたい方はjsやcssで読み込まなくて良いです


new.html.erb

#app/views/articles/new.html.erb

<h2>新規投稿</h2>
<%= render "articles/form" %>


edit.html.erb

#app/views/articles/edit.html.erb

<h2>編集ページ</h2>
<%= render "articles/form" %>


index.html.erb

#app/views/articles/index.html.erb

<div class="container">
  <div class="col-sm-10 col-sm-offset-2 col-xs-12">
    <% @articles.each do |article| %>
    <div class="col-xs-12 text-center">
      <div class="text-center">
        <h2><%= article.title %></h2>
        <h6><%= article.created_at.strftime('%b %d, %Y') %></h6>
      </div>
      <div>
        <%= raw(article.body).truncate(300) %>
      </div>
      <div class="text-center">
        <%= link_to "詳細へ", article_path(article) %>
      </div>
      <!-- This block is available to only signed in users -->
      <% if signed_in? %>
        <%= link_to "一覧", article_path(article), class: "btn btn-primary" %>
        <%= link_to "編集", edit_article_path(article), class: "btn btn-default" %>
        <%= link_to "削除", article_path(article), class: "btn btn-danger", data: {:confirm => "削除してもいいですか?"}, method: :delete %>
      <% end %>
      <hr />
    </div>
    <% end %>
  </div>
</div>


show.html.erb

#app/views/articles/show.html.erb

<div class="col-sm-11 col-sm-offset-1 col-xs-12">
  <h2 class="text-center"><%= @article.title %></h2>
  <h5 class="text-center"><%= @article.created_at.strftime('%b %d, %Y') %></h5>
  <div class="fr-view"><%= raw @article.body %></div>
</div>

ここで, Froala-WYSIWYG  はクラス名に fr-view を付与しないと エディターのビューのUIとして出力されません。

5. ルートを作る

#config/routes.rb

Rails.application.routes.draw do
  root to: "articles#index"
  resources :articles
end


6. modelを作る

$ rails generate model Article title:string body:text
$ rake db:migrate


導入はこれで終わり！！

参考url 素晴らしい参考文献  

最高のエディターライフを!!