Instalando o FCKEditor: Um Otimo Editor HTML / WYSIWYG

O FCKEditor é, na minha opinião, o melhor editor html (WYSIWYG) da atualidade. Com funcionalidades como 'Paste from Word' e Upload de imagens, o editor nunca deixou a desejar.

Hoje vou explicar como instalar este editor no seu projeto Rails, utilizando um plugin. A pagina do plugin, para quem quiser mais informações, esta disponivel aqui.

Como exemplo desta vez, vamos criar um pequeno projeto para Blog Posts que vai utilizar o FCKEditor para o corpo da postagem. Não se esqueça de checar seu databases.yml se precisar de mudanças.

rails myblog
cd myblog
rake db:create

Vamos criar um scaffold padrao para nossos posts:

ruby script/generate scaffold post title:string content:text published:boolean

Para ja garantir que nosso scaffold funcione logo no começo, vamos remover a index.html do diretorio public e editar o routes.rb para apontar para nosso PostsController por padrão:

rm public/index.html

config/routes.rb

map.root :controller => "posts"

Vamos então migrar o banco para a ultima versão e iniciar o server, para ter certeza que esta tudo ok!

rake db:migrate
ruby script/server

Abra o projeto em seu navegador e crie uns posts. Vou assumir que isto já funciona a partir de agora.

Para instalar o plugin do FCKEditor, basta rodar o script de instalação de plugins em seu projeto:

ruby script/plugin install svn://rubyforge.org//var/svn/fckeditorp/trunk/fckeditor

Uma vez instalado, o plugin vai disponibilizar uma nova task rake, para que ele possa se auto instalar em diretorios como public/javascripts. Para confirmar que a nova rake task está disponível, execute o comando que mostra a lista de rake tasks:

rake -T

Confirme que você tem as tasks do fckeditor (rake fckeditor:download, fckeditor:install). Se estiver tudo ok, basta rodar a tarefa de instalação:

rake fckeditor:install

Otimo! O plugin já está instalado e pronto para uso. Agora precisamos adicionar o javascript do fckeditor nas nossas chamadas a javascript, no header do nosso layout.

app/view/layouts/posts.html.erb


span ><meta equiv="content-type" content="text/html;charset=UTF-8">
<title>Posts: <%= controller.action_name ></title>
<span > <%= stylesheet_link_tag 'scaffold' %></span>
<span > <%= javascript_include_tag 'fckeditor/fckeditor' %></span>


Muito bem. Agora basta trocarmos nossos campos de textarea pelo editor. No nosso exemplo, ja que geramos o scaffold automaticamente, temos 2 arquivos de template para fazer esta modificação: app/views/posts/new.html.erb e app/views/posts/edit.html.erb.

Primeiro o formulario para criar novos posts:

app/views/posts/new.html.erb


<% form_for(@post) do |f| %>
<%= f.error_messages %>

<%= f.label :title %>
<%= f.text_field :title %>

<%= f.label :content %>
# remover esta linha que cria o textarea <%= f.text_area :content %>

">
<%= fckeditor_textarea( :post, :content, :width => 600, :height => 400 ) %>

<%= f.label :published %>
<%= f.check_box :published %>
<%= f.submit "Create" %>
<% end %>

<%= link_to 'Back', posts_path %>

Agora nosso formulario para editar posts existentes:

app/views/posts/edit.html.erb

<% form_for(@post) do |f| %>
<%= f.error_messages %>

<%= f.label :title %>
<%= f.text_field :title %>

<%= f.label :content %>
# remover esta linha que cria o textarea <%= f.text_area :content %>">
<%= fckeditor_textarea( :post, :content, :width => 600, :height => 400 ) %>

<%= f.label :published %>
<%= f.check_box :published %>

<%= f.submit "Update" %>
<% end %>

<%= link_to 'Show', @post %> |
<%= link_to 'Back', posts_path %>

Agora, reinicie seu servidor para que ele detecte o novo plugin instalado, e crie seus blogs em formato HTML!

Extra: Para usar o FCKEditor com AJAX, basta utilizar a tag da seguinte forma:

<%= form_remote_tag :url => { :action => 'update', :id => @post }, :before => fckeditor_before_js('post', 'content') %>">

<%= fckeditor_textarea( "post", "content", :ajax => true, :width => 600, :height => 400 ) %>

<% end_form_tag %>

É isso aí. Até a próxima!