Setup

Bước đầu tiên là cần thêm gem CKEditor vào Gemfile như bên dưới

# Gemfile
gem "ckeditor"

Sau đó đương nhiên phải chạy bundle install trong terminal để cài đặt gem.

Usage

Bước tiếp theo, sau khi đã cài đặt thành công, ta xây dưng một ứng dụng demo cực kỳ đơn giản để sử dụng CKeditor. Mở terminal tạo model và chạy rake db:migrate như bên dưới:

rails g resource Magazine title body:text
rake db:migrate

Kế tiếp, ta cần định nghĩa routes cho ứng dụng của mình. Mở file routes.rb và thêm các dòng sau:

# config/routes.rb

root to: "magazines#index"
resources :mail_magazines

Tiếp theo, ta include thư viện javascript mà gem cung cấp sẵn vào app/assets/javascripts/application.js của ứng dụng:

// application.js
...
//= require jquery
//= require jquery_ujs
//= require ckeditor/init
//= require turbolinks
//= require_tree .

Đến đây, mọi việc cài đặt để sử dụng CKEditor trong ứng dụng đã hoàn tất. Phần sau, ta sẽ tiến hành tạo controller để thực hiện các action CRU như sau:

# mail_magazines_controller.rb
class MagazinesController < ApplicationController
  def index
    @magazines = Magazine.order("created_at DESC")
  end

  def show
    @magazine = Magazine.find(params[:id])
  end

  def new
    @magazine = Magazine.new
  end

  def create
    @magazine = Magazine.new(magazine_params)
    if @magazine.save
      redirect_to magazines_path, notice: "The magazines has been successfully created."
    else
      render :new
    end
  end

  def edit
    @magazine = Magazine.find(params[:id])
  end

  def update
    @magazine = Magazine.find(params[:id])
    if @magazine.update(magazine_params)
      redirect_to magazines_path, notice: "The magazine has been successfully updated."
    else
      render :edit
    end
  end

  private
  def magazine_params
    params.require(:magazine).permit(:title, :body)
  end
end

Sau đó, tiếp đến ta tạo views cho trang index. Trong file app/views/magazines/index.html.erb được sửa như sau:

<%= link_to "New Magazine", new_magazine_path %>
<% @magazines.each do |magazine| %>
  <h3><%= magazine.title.html_safe %></h3>
  <p><%= magazine.body.html_safe %></p>
  <%= link_to "Edit Magazine", edit_magazine_path(magazine) %>
  <% if magazine != @magazines.last %>
  <hr />
  <% end %>
<% end %>

Bước tiếp theo là tạo một partial để làm form create và update magazines. Tạo file app/views/_form.html.erb như bên dưới

<% if @magazine.errors.any? %>
  <ul>
    <%= @magazine.errors.full_messages.each do |message| %>
        <li><%= message %></li>
    <% end %>
  </ul>
<% end %>
<%= form_for @magazine do |f| %>
  <div>
    <%= f.label :title %>
  </div>
  <div>
    <%= f.text_field :title %>
  </div>
  <div>
    <%= f.label :body %>
  </div>
  <div>
    <%= f.cktext_area :body, rows: 10 %>
  </div>
  <div>
    <%= f.submit %>
  </div>
<% end %>

Tiếp theo tạo views cho trang new. Trong file app/views/magazines/new.html.erb thực hiện như sau:

<h3> New Magazine</h3>
<%= render "form" %>

Cuối cùng tạo views cho trang edit. Trong file app/views/magazines/edit.html.erb thực hiện như sau:

<%= "Editing #{@magazine.title}" %>
<%= render "form" %>

Bây giờ khi vào các trang new và edit magazie ta đã có thể nhập content bằng CKEditor

Images Using Carrierwave

Mục tiêu của phần này là xử lý việc upload ảnh bằng CKEditor và lưu và trong database bằng Carrierwave. Đầu tiên cần cài đặt gem Carrierwave:

gem 'carrierwave'
gem 'mini_magick'

Không quên chạy bundle install

Sau khi đã cài đặt gem cần thiết xong, vì gem CKEditor đã cung cấp sẵn các genarator để tạo các model cần thiết để lưu trữ ảnh nên bây giờ ta chỉ cần chạy lện sau là đã có thể upload và lưu trữ ảnh bằng CKEditor:

rails generate ckeditor:install --orm=active_record --backend=carrierwave
rake db:migrate

Bây giờ khi vào trang edit và new ta đã có thể sử dụng được chức năng upload ảnh của CKEditor.

Kết luận

Trên đây là một ví dụ đơn giản về cách sử dụng CKEditor cơ bản trong một ứng dụng Rails. Để tuỳ biến editor theo yêu cầu thì bạn có thể đọc thêm tại:

• https://github.com/galetahub/ckeditor
• http://docs.ckeditor.com/#!/api/CKEDITOR.config

Cảm ơn đã theo dõi bài viết!