CKEditor is a compelling alternative to the TinyMCE WYSIWYG editor. This article will show you how to add CKEditor to your application.

Basics

First, we need to add the CKEditor gem to our gemfile. Open up your gemfile and add the line listed below.

Gemfile:

gem "ckeditor"

Next, run a bundle install to install the gem.

Terminal Commands:

bundle install

Great, now lets create a sample model and accompanying controller that will be used to store our data. Run the command below to create the Article model and migrate the database.

Terminal Commands:

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

Now, open your routes file and add the following line to your routes.

config/routes.rb:

root to: "articles#index"

Now, lets add the CKEditor javascript include to our application.js. Modify your application.js file so that it looks like the code listed below.


// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require ckeditor/init
//= require_tree .

Great, now we need to add some code to the articles controller. Add the following code to the articles controller.

app/controllers/articles_controller.rb:

class ArticlesController < ApplicationController
  def index
    @articles = Article.order("created_at DESC")
  end

  def show
    @article = Article.find(params[:id])
  end

  def new
    @article = Article.new
  end

  def create
    @article = Article.new(article_params)
    if @article.save
      redirect_to articles_path, notice: "The article has been successfully created."
    else
      render action: "new"
    end
  end

  def edit
    @article = Article.find(params[:id])
  end

  def update
    @article = Article.find(params[:id])
    if @article.update_attributes(article_params)
      redirect_to articles_path, notice: "The article has been successfully updated."
    else
      render action: "edit"
    end
  end

private

  def article_params
    params.require(:article).permit(:title, :body)
  end
end

This code enables the ability to read, write, and update the articles in our example. Now for the views, first lets create the index view.

app/views/articles/index.html.erb:

<%= link_to "New Article", new_article_path %>
<% @articles.each do |article| %>
  <h3><%= article.title.html_safe %></h3>
  <p><%= article.body.html_safe %></p>
  <%= link_to "Edit Article", edit_article_path(article) %>
  <% if article != @articles.last %>
  <hr />
  <% end %>
<% end %>

Now, lets create a partial to store the form. Create a file called app/views/_form.html.erb and add the code listed below.

app/views/articles/_form.html.erb:

<% if @article.errors.any? %>
  <ul>
    <%= @article.errors.full_messages.each do |message| %>
        <li><%= message %></li>
    <% end %>
  </ul>
<% end %>
<%= form_for @article 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 %>

Now, lets create the new view. Create the new.html.erb file and add the code listed below.

app/views/articles/new.html.erb:

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

Now, if you visit the new articles page on your development server you will see that CKEditor appears.

Next lets create the edit view. Create the edit.html.erb file and add the code listed below.


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

Great, now when you click 'edit article' on any article, it will show the CKEditor for editing.

Images using Paperclip

In order to integrate images via paperclip, a few more steps are required. Note that you must have ImageMagick installed for this to work. First, lets include the paperclip gem.

Gemfile:

gem "paperclip"

Next, we need to run a generator provided by ckeditor. This generator will create the necessary models that will be used to store image data. Run the command below.

Terminal Commands:

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

Finally, if you restart your rails server and refresh the page, you will be able to click the images button, upload an imaage, and insert it into your articles.

Awesome! That's all there is to it! For more information on the ckeditor gem please visit the github page at https://github.com/galetahub/ckeditor and as always, thanks for reading!