概要
みなさんこんにちはcandleです。今回はckeditorの画像のアップロードを行ってみたいと思います。
ckeditorの画像のアップロードは公式githubにも記載されているのですが、まあやってみましょう。
前提
ckeditorがすでにruby on rails上で動いている。
もしも、まだckeditorの導入ができてない人は下の記事を参考にしてください。
ruby on railsのckeditor gemの使い方をscaffoldを用いて解説する
説明はruby on railsのscaffoldとtwitterbootstrapを使用します。
carrierwaveとrmagick系をインストールする
railsプロジェクトのGemfileを開いて下の内容を書き込みます。
gem 'carrierwave' gem 'rmagick' gem 'mini_magick'
保存したら下のコマンドでインストールします。
bundle install --path vendor/bundle
gemのインストールが完了しました。
ファイルアップロード用のモデルを作る
公式サイトにもあるようにファイルのアップロードにcarrierwaveを使う場合は下のコマンドで作成します。
rails generate ckeditor:install --orm=active_record --backend=carrierwave
このコマンドを行うといくつかのファイルが作成されます。
ckeditorの為のモデルやマイグレーションファイルが作られるので下のコマンドでデータベースに反映させます。
bundle exec rake db:migrate
これでサーバに画像をアップロードできるようになりました。
ファイルをアップロードする
サーバを起動しましょう
bundle exec rails s
railsのckeditorを適応したscaffoldのnewに移動します。
下のようにckeditorが表示されているでしょうか？
画像を挿入するボタンを押します。すると、別のウィンドウが出てくるので、そのアップロードを押しましょう。
続いて、ファイルを選択をクリックします。
画像ファイルを選択して、「サーバーに送信」を押します。
上の画像の様に、画像ファイルが表示されれば、ファイルのアップロードがうまくいっています。
コンソールで画像があるか一応確認します。
railsプロジェクトのpublic/uploads/ckeditor/pictures/1/に移動します。
最後の階層の1か、もしかすると2になっているかもしれないので自分のプロジェクトに合わせて移動してください。
アップロードできましたね。
まとめ
carrierwaveを使うと比較的簡単にファイルのアップロードができるので是非試してください。
