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:

diretorio.jpg

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 smile ) e modifique o path padrão para '/javascripts/':

fckeditorEdit.jpg

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:

navegador.jpg

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
Topic attachments
I Attachment Action Size Date Who Comment
diretorio.jpgjpg diretorio.jpg manage 87.2 K 10 Oct 2006 - 21:00 LeandroNunes  
fckeditorEdit.jpgjpg fckeditorEdit.jpg manage 34.5 K 10 Oct 2006 - 21:02 LeandroNunes  
navegador.jpgjpg navegador.jpg manage 25.1 K 10 Oct 2006 - 21:24 LeandroNunes  
Topic revision: r2 - 10 Oct 2006, LeandroNunes
 

This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Wiki-Colivre? Send feedback