joppot

コピペで絶対動く。説明を妥協しない

プログラミング

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

投稿日:

Pocket

89y8989

概要

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

前提

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

SPONSORED LINK


ckeditorをインストールする

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

gem 'ckeditor'

gem 'rmagick'
gem 'mini_magick'

koregagem

記述したら、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

createok

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

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

rake db:migrate

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

rails g bootstrap:layout application
rails g bootstrap:themed Editors

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

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

bundle exec rails s

checkeditorview

できました。

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

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

ditornewwindow

この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>

editeditorview

保存しましょう。

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

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

//= require ckeditor/init

includeckeditor

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

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

descriptionisckeditor


まとめ

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

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-

執筆者:


  1. daikitakaya より:

    こんばんは。
    初めましてよく記事を見させていただいてます。どれもとても詳しくてとても助かっています。特にリッチテキストエディタ関連の記事は何回も見ています。

    現在、rails歴3ヶ月の初心者大学生なのですがインターン先でブログシステムを作るという課題が出ています。特にリッチテキストエディタの実装に苦戦しています。

    やはり開発初期の段階ではScaffoldで雛形を作ってから手を加えていく方がオススメでしょうか?デザイン部分は他の学生が行うことになっています。

    インターン先はエンジニアが一人しかおらず、ほとんどネットで調べて試行錯誤している状態です。いきなり質問攻めで申し訳ございません。

    • candle より:

      返信遅れてすみません。candleです。

      最初に、質問にお応えすると、開発段階では私はいつもscaffoldを使用しています。
      scaffoldをベースにして、エディタ開発をすれば、他のプログラムに業を煮やさずにすむからです。

      ただ、ここで少し、足し加えると。
      私も仕事上、どうしてもリッチテキストエディタを作る必要がありました。
      このブログでも取り上げている様に、最初はckeditorを使用していました。
      しかし、ckeditorはあまりにも仕様がガチガチに作られており、カスタマイズ性に欠けていました。
      特に、写真、動画のアップロードを行い、エディタに埋め込むところで、望むものが作成できませんでした(もちろん最低限はできます)。

      最近は全てsquire editorで開発しています。
      こちらはかなり自由です。しかし、自由すぎて、思ったものを作るのは大変です。
      私も1〜2ヶ月開発に時間をかけて、なんとか目的のものを作成できました。

      そちらの方は、まだ記事してい無いのですが、ゆくゆくは記事にまとめていきたいと考えています。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ruby on railsで出力されるlog(ログ)のフォーマットを変更する

概要 みなさんこんにちはcandleです。今回はrailsのログに関する記事です。railsは決まった記述でログを出力します。 webアプリケーションを実行中におかしな挙動が合った場合はこのログをもと …

railsのfluent-logger gemを使ってユーザーのアクセスをfluentdサーバに収集する

概要 みなさんこんにちはcandleです。前回からfluentd関連の記事を続けていますが、今回辺りから実用的な使い方を書いていきたいと思います。 fluentdと言えば、ビックデータで扱うようなデー …

railsのscaffoldでremote formを使ってフォームの送信をajax化する

概要 みなさんこんにちはcandleです。 今回はrailsのformをremoteを使ってajaxしたいとおもいます。 正直、解説するまでもなく簡単です。 前提 適当なrailsプロジェクトが存在す …

javascriptでのJSONの大きさ(サイズ)の取得

概要 みなさんこんにちはcandleです。今回はプログラミングで少し手間取ったJSONサイズ取得の問題について書いていこうと思います。 JSONはjavascirptでわりと多く使われるオブジェクト型 …

railsのrakeで作成したmigrationファイルとstatus履歴を削除する

概要 みなさんこんにちはcandleです。今回はrakeコマンドで作成したマイグレーションファイルの管理を紹介します。rakeコマンドを使っていると、よくよく考えれば必要の無いファイルがある。とか重複 …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ