概要
みなさんこんにちは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に上げる方法などを紹介していきます。
こんばんは。
初めましてよく記事を見させていただいてます。どれもとても詳しくてとても助かっています。特にリッチテキストエディタ関連の記事は何回も見ています。
現在、rails歴3ヶ月の初心者大学生なのですがインターン先でブログシステムを作るという課題が出ています。特にリッチテキストエディタの実装に苦戦しています。
やはり開発初期の段階ではScaffoldで雛形を作ってから手を加えていく方がオススメでしょうか?デザイン部分は他の学生が行うことになっています。
インターン先はエンジニアが一人しかおらず、ほとんどネットで調べて試行錯誤している状態です。いきなり質問攻めで申し訳ございません。
返信遅れてすみません。candleです。
最初に、質問にお応えすると、開発段階では私はいつもscaffoldを使用しています。
scaffoldをベースにして、エディタ開発をすれば、他のプログラムに業を煮やさずにすむからです。
ただ、ここで少し、足し加えると。
私も仕事上、どうしてもリッチテキストエディタを作る必要がありました。
このブログでも取り上げている様に、最初はckeditorを使用していました。
しかし、ckeditorはあまりにも仕様がガチガチに作られており、カスタマイズ性に欠けていました。
特に、写真、動画のアップロードを行い、エディタに埋め込むところで、望むものが作成できませんでした(もちろん最低限はできます)。
最近は全てsquire editorで開発しています。
こちらはかなり自由です。しかし、自由すぎて、思ったものを作るのは大変です。
私も1〜2ヶ月開発に時間をかけて、なんとか目的のものを作成できました。
そちらの方は、まだ記事してい無いのですが、ゆくゆくは記事にまとめていきたいと考えています。