Installasi CKeditor pada aplikasi Ruby on Rails

CKEditor adalah editor teks HTML yang siap untuk digunakan dan dirancang untuk menyederhanakan pembuatan konten web. Dari mulai menyisipkan link, mengubah warna text, mengubah font, menambahkan bullet and numbering dan masih banyak fitur lainnya. Misalnya Anda ingin membuat sebuah konten dalam web yang menampilkan paragraf bergambar. Dengan Ckeditor akan lebih mudah dalam pembuatannya, proses pembuatannya mirip sekali dengan editor di Microsoft Word atau word editor yang lain. Namun tentunya dengan CKeditor pembuatannya akan lebih sederhana.

Berikut ini akan dijelaskan installasi CKeditor pada aplikasi Ruby on Rails :

1. Tambahkan gem ckeditor pada Gemfile, lalu jalankan bundle install

gem 'ckeditor'

    2.  Untuk generate model file upload biasanya menggunakan gem paperclip. Tambahkan terlebih dahulu gem paperclip di Gemfile lalu jalankan ini di console

gem 'paperclip'

rails generate ckeditor:install --orm=active_record --backend=paperclip

   3. Misalkan aplikasi yang kita buat adalah membuat blog. Agar lebih mudah gunakan scaffold untuk menggenerate controller dan modelnya.

rails generate scaffold blogs

4.  Setelah digenerate di console, untuk model blog tambahkan 2 kolom misalkan kolom untuk 'title' dan 'body'. Lalu jalankan perintah rake db:migrate

class CreateBlogs < ActiveRecord::Migration
  def change
    create_table :blogs do |t|
      t.string :title
      t.text :body
      t.timestamps
    end
  end
end

5.  Setelah itu include ckeditor javascript pada file application.js

//= require ckeditor/init

Bila aplikasi yang dibuat menggunakan rails 4, maka include ini terlebih dahulu sebelum ckeditor/init pada file application.js

//= require ckeditor/override
//= require ckeditor/init

catatan: apabila membuatnya di OS Windows terjadi error, hapus baris ini :

//= require ckeditor/override

6.  Baru setelah itu kita bisa menyisipkan ckeditor pada form yang akan dibuat. Misalkan kita akan membuat halaman create new blog. Pada bagian body, cukup tambahkan cktext_area untuk memuat ckeditornya.

<%= f.label :title %>:<span><%= f.text_field :title %></span>
 <br/>
<%= f.label :body %>:
 <br/>
<%= f.cktext_area :body, :width => 100 %>
<%= f.submit %>

Hasilnya kurang lebih akan terlihat seperti ini

Selamat mencoba dan happy coding :)