Integrando FCKEditor em sua aplicação em Ruby on Rails
Configuração Básica
FCKEditor é uma aplicação livre que possibilita criar
textos ricos num formulário HTML. Eu irei te mostrar como integrar esta aplicação na sua aplicação em
Ruby on Rails.
O primeiro passo é ir no endereço:
http://www.fckeditor.net
e realizar o download da última versão do editor. Um vez terminado o download, descompacte o seu conteúdo em um diretório temporário e copie os seguintes arquivos e pasta para a pasta
/public/javascripts da sua aplicação rails:
/editor/
fckconfig.js
fckeditor.js
fckstyles.xml
fcktemplates.xml
Quando você efetuar a cópia dos arquivos, seu diretório javascripts será parecido com este:
Agora você precisa editar algumas das configurações padrões. Abra o arquivos
fckeditor.js no seu editor de texto favorito (eu uso o vim

) e modifique o path padrão para
'/javascripts/':
Uma vez completada esta etapa, você está pronto para inserir o editor para a sua visualização.
Abra a view onde você quer que o editor esteja, e adicione uma referência para o arquivo javascript básico do editor cmo esta linha:
<%= javascript_include_tag "fckeditor" %>
Esta linha deve ficar antes da tag html
.
O editor trabalha substituindo a tag textarea existente, então nós rpeciamos seguir em frente e criar uma:
<textarea id="MinhaTextarea" name="MinhaTextarea">Este é <b>o</b> valor inicial.</textarea>
O última coisa que precisamos fazer é escrever o javascript para substituir o textarea:
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MinhaTextarea' ) ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
Feito isso está completo, nós podemos recarregar a página e ver o novo editor:
Todo o arquivo rhtml ficará como se segue:
<html>
<head>
<title>test</title>
<%= javascript_include_tag "fckeditor" %>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
<body>
<form action="/default/save" method="POST">
<textarea id="MinhaTextarea" name="MinhaTextarea">Este é <b>o</b> valor inicial.</textarea>
<input type="submit" value="Refresh">
</form>
</body>
</html>
trate o editor como qualquer outro campo do formulário, e tudo funcionará bem ;).
Você pode editar as configurações FCKEditor para as que você usa normalmente - a maioria delas estão presentes no arquivo
'fckconfig.js'. Algumas das coisas que você pode querer mudar são as barras padrões, altura e largura do editor, e estilos disponíveis.
Referências
--
LeandroNunes - 10 Oct 2006