Usando TinyMCE no Ruby on Rails

TinyMCE é um script escrito em javascript que adiciona aos seus campos TEXTAREA, dentre outros elementos do HTML, características avançadas similiares às de um editor de texto, como o Microsoft Word.

Recentemente precisei utilizar um recurso como este em meu projeto de conclusão do curso na faculdade e escolhi o TinyMCE para isso. Encontrei algumas opções para configurá-lo no Rails através de Ruby Gems ou Plugins, mas, não sei se foi por incompatibilidade da minha aplicação ou por falta de conhecimento meu na hora de configurar, não consegui colocar em funcionamento.

Então entrei no site oficial do script (http://tinymce.moxiecode.com) e procurei a respeito de como configurá-lo manualmente. O procedimento para isto é extremamente simples, vou descrever a seguir.

Para começar irei criar uma aplicação de Rails simples utilizando scaffold, para que vocês possam acompanhar na prática o procedimento e para não fugirmos muito do escopo do post.

Sendo assim, abrirei o console e digitarei os seguintes comandos no diretório onde costumo gravar meus projetos de RoR (Ruby on Rails):

rails notes -d mysql

Nosso projeto de exemplo será um programa para criação de anotações, por isso o nome "notes" e, como utilizo banco de dados MySQL, utilizei os parâmetros "-d mysql".

O comando acima criou nosso projeto, agora vou configurar o arquivo config/database.yml para alterar a senha do banco de dados. Para isso estou utilizando o editor de texto gvim, mas você pode escolher o que achar melhor.

cd notes
gvim config/database.yml

Agora vamos criar um model chamado note, que terá um título e um texto de corpo. Como disse, utilizarei scaffold para poupar tempo:

script/generate scaffold note title:string body:text
rake db:create
rake db:migrate

Se você quiser testar para ver se tudo está conforme o planejado, inicie o servidor:

script/server

E acesse o endereço http://localhost:3000/notes/new

Deve estar como na figura abaixo:

A idéia agora é aplicar o TinyMCE a essa textarea da view da figura acima (new.html.erb). Então vamos iniciar a configuração do script em si.

Primeiro de tudo você deve baixar o script no site:

http://tinymce.moxiecode.com/download.php

Hoje, 28 de abril de 2009, a versão atual é tinymce_3_2_3.zip (main package).

Após baixar o arquivo descompacte-o e abra o seu conteúdo.
Dentro do diretório jscripts existe um diretório chamado tiny_mce.

Mova esse diretório para seu_projeto/public/javascripts

Deve ficar assim:

/public/javascripts/tiny_mce

Feito isso abra a view que iremos aplicar o script (app/views/notes/new.html.erb) em seu editor de textos preferido. No meu caso utilizarei o gvim de novo:

gvim app/views/notes/new.html.erb

Primeiramente vamos carregar o script em nossa view. Para isso, ao invés de utilizarmos as tags do html diretamente, utilizaremos os helpers do Rails.

Nesse caso vamos utilizar o método javascript_include_tag, que recebe o nome do javascript como parâmetro.

Então, após abrir a view, adicione logo no início do arquivo a seguinte linha:

<%= javascript_include_tag 'tiny_mce/tiny_mce.js' %>

Deve ficar assim:

E agora vamos adicionar um trecho de javascript que irá configurar como nossa textarea deve ser exibida (que opções de formatação deve conter, etc).

No próprio site do script contém vários exemplos de configurações prontos, assim como uma API e documentação sobre o assunto. Acesse:

http://tinymce.moxiecode.com/examples/full.php

Você pode escolher um dos exemplos e clicar em "View Source" para visualizar o código fonte.

Para nosso exemplo eu utilizarei um exemplo pronto do site denominado "Simple".

Para criar tags de javascript em nossa view utilizarei o método javascript_tag e colocarei o código retirado do site do TinyMCE dentro dele, ficará assim (pode ser logo após a útima linha que digitamos no arquivo):

<% javascript_tag do tinyMCE.init({ mode : "textareas", theme : "simple" }); end %>

Execute o servidor para ver o resultado, deve ter ficado assim:

Eu utilizei a opção de configuração mais simples do TinyMCE, para poupar o código do exemplo. Mas existem muitas outras opções com mais recursos no site de exemplos, cuja dificuldade para a configuração é exatamente a mesma do exemplo.

O script faz com que, após digitar o texto formatado na textarea, ela chegue na action do controller com sua formatação já convertida para as respectivas tags de HTML.

Apenas mais um último detalhe: se você entrar agora na parte de visualização dessa anotação que cadastramos, perceberá que ela não aparece formatada de acordo com o que cadastramos, as tags htmls são exibidas na tela, ao invés da formatação.

Vide imagem:

Isso ocorre porque o scaffold criou as views utilizando o método "h" para imprimir a informação no navegador.

Veja a linha 8 da imagem (arquivo app/views/notes/show.html.erb):

Para corrigir isso basta tirarmos o método "h", como na figura:

E o resultado será:

E com isso temos nossa pequena aplicação funcionando. Espero que o exemplo tenha ajudado a entender a configuração.

Qualquer dúvida estou a disposição no e-mail, twitter ou aqui nos comentários do blog.

Gostaria de agradecer ao Rafael Rosa Fu e ao Fábio Kung por tirar as dúvidas que eu tinha em relação a esse post e também pela ajuda que eles sempre me dão em todos os meus testes com o Rails.

Abraços e até o próximo post!