Usando CKEditor com Rails

Você tem um blog escrito em rails mas não existe formatação nas postagens? o CKEditor pode te ajudar, ele cria uma barra de formatação.

Começando

Vamos começar criando um novo projeto através do comando rails new blog no terminal.

Abra o arquivo Gemfile e insira

  ...
    gem 'ckeditor'
  ...

Execute o comando bundle install no terminal

Adicione a linha abaixo dentro do arquivo config/initializers/assets.rb;:

  Rails.application.config.assets.precompile += %w( ckeditor/*)

Dentro do arquivo config/routes.rb digite mount Ckeditor::Engine => '/ckeditor' O resultado deve ser esse:

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  mount Ckeditor::Engine => '/ckeditor'
end

Em app/assets/javascripts/application.js faça a importação do arquivo:

  ...
  //= require ckeditor/init
  //= require_tree .

Para exemplificar melhor iremos criar um modelo de postagem para utilizar o CKEditor

  rails g scaffold Post title body:text

Não costumo usar o scaffold com frequência porque pode viciar e você deixa de aprender muitas coisas utilizando esses comandos automatizados. Então, se liga!

Execute o comando rake db:migrate para criar a tabela no banco de dados.

Até este ponto o nosso formulário para inserção da notícia está assim:

Para inserir a barra de formatação iremos editar o arquivo partial que está localizado em app/views/posts/_form.html.erb, alterando a linha que contém form.text_area para form.cktext_area.

  <%= form.cktext_area :body, id: :post_body, ckeditor: { language: 'pt-BR'} %>

Logo, o formulário deverá se apresentar desta forma:

Mas ao salvar um texto com edição ele aparecerá da seguinte forma:

Para corrigir isso basta adicionar o método raw antes da chamada do atributo body. Podemos alterar essa opção em app/views/posts/show.html.erb

  <%= raw @post.body %>

E em app/views/posts/index.html.erb

  <td><%= raw post.body %></td>

O resultado final deve parecer com este:

Essa é a forma básica de integração do CKEditor com um projeto Ruby on Rails, se ficou alguma dúvida ou outra coisa mais, pode entrar em contato comigo.