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は本番環境と開発環境で若干設定が違います。本番環境での設定は別の記事で紹介します。


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

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

関連記事

railsのwebrickでi18nの言語切り分けをサブドメインで設定する

概要 みなさんこんにちはcandleです。最近では海外展開も視野に入れたwebアプリケーションの開発が行われることが多くなってきているような気がします。 そうなってくると、webアプリケーションの国際 …

railsのmodelで各データが何個あるかカウントする

概要 皆さんこんにちはcandleです。 今回は、railsでレコードのデータそれぞれ何個あるのか数える方法を紹介します。 mysqlだと簡単なのですが、railsだとよくわからなかったので、いろいろ …

processingで重複しないランダムな数を配列で取得する

概要 みなさんこんにちはcandleです。今回はprocessingで重複しないランダムな数を配列で取得する関数を作成したいとおもいます。 前提 なし

railsのgonで別ページでリロード後turbolinksで移動したら変数がundefindする場合の対処

概要 (追記 2016/05/18 この方法を行うと、turbolinksで問題が起きました。 turbolinksで移動した回数だけ、javascriptが実行されてしまいました。 例えば、 < % ...

MAMPのSQLiteManagerを使用してsqlite3のテーブルの作成とフィールドの設定、レーコードの挿入を試す

概要 みなさんこんにちはcandleです。前回と引き続き、SQLiteManagerを使用してsqlite3を試してみましょう。 はじめに、書いておきますが、MAMPのSQLiteManagerはSQ …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ