ruby on railsのckeditor gemの使い方をscaffoldを用いて解説する

Tweet

概要

みなさんこんにちはcandleです。今回はruby on railsのckeditorという素晴らしいgemを使って見たいと思います。
ckeditorとはweb版の高機能なwordとかテキストエディタみたいなものです。イメージ的にはwordpressの記事投稿フォームをイメージすると分かりやすいと思います。

前提

ruby on railsの環境が整っている
ちなみに今回紹介するrailsの環境はdevelopment環境です。
ckeditorは本番環境と開発環境で若干設定が違います。本番環境での設定は別の記事で紹介します。

ckeditorをインストールする

railsプロジェクトのGemfileを開きます。
下の内容を記述しましょう。
ちなみに、rmagick等もckeditorで使うのでそれも加えておきます。

gem 'ckeditor'

gem 'rmagick'
gem 'mini_magick'

記述したら、bundle installでインストールしましょう。

bundle install --path vendor/bundle

これで準備ができました。

scaffoldを作成する

ckeditorを使うためのscaffoldを作成しましょう。

私はtwitterbootstrap gemを使った上でscaffoldを作ります。同じように進行したい場合は下の記事でtwitterbootstrap gemを入れておいてください。

ruby on rails4でtwitterbootstrap3のgemを使用してscaffoldを作成する

scaffoldの名前はEditorとします。ちなみにCkeditorというのはもう使われているので、使わないでください。

rails g scaffold Editor title:string description:text

scaffoldで必要なファイルが作成されます。

作成されたマイグレーションファイルをデータベースに反映させます。

rake db:migrate

データベースが用意されたので、bootstrapのスタイルを適応します。

rails g bootstrap:layout application

rails g bootstrap:themed Editors

これを実行すると、テーマがファイルに自動的に書き込まれます。
実行すると分かる様に、すでにファイルが存在するので、コンフリクト（衝突）が起きてしまいます。
上書きを許可しましょう。質問されたら「y」と答えれば良いです。

scaffoldが完成しました。
サーバにアクセスして確認します。

bundle exec rails s

できました。

scaffoldのviewを変更してckeditorを使う

ブラウザの「New」ボタンを押すと、下のような画面になります。

このDescriptionの項目のテキストエリアをckeditorに変更したいと思います。
app/views/editors/_form.html.erbを開きます。

下の記述の部分を

<div class="form-group">
  <%= f.label :description, :class => 'control-label' %>
  <div class="controls">
    <%= f.text_field :description, :class => 'form-control' %>
  </div>
</div>

下のようにします。複数行書いていますが、変えている場所はf.cktext_areaのところだけです。

<div class="form-group">
  <%= f.label :description, :class => 'control-label' %>
  <div class="controls">
    <%= f.cktext_area :description, :class => 'form-control' %>
  </div>
</div>

保存しましょう。

次に、app/assets/javascripts/application.jsを開きます。

下の方に、下の記述を書きましょう。

//= require ckeditor/init

これでCkeditorが使える様になりました。

サイトにアクセスしてみましょう。
newの画面のdescriptionの所がckeditorになっていますね。

まとめ

次回、移行本番環境での設定や、画像のアップロードの仕方、S3に上げる方法などを紹介していきます。