You are here: Wiki-Colivre>Tech Web>FCKEditorRubyOnRails (10 Oct 2006, LeandroNunes)EditAttach

Integrando FCKEditor em sua aplicação em Ruby on Rails

Integrando FCKEditor em sua aplicação em Ruby on Rails
- Configuração Básica
- Referências

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 smile

) 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

Topic attachments
I	Attachment	Action	Size	Date	Who
jpg	diretorio.jpg	manage	87.2 K	10 Oct 2006 - 21:00	LeandroNunes
jpg	fckeditorEdit.jpg	manage	34.5 K	10 Oct 2006 - 21:02	LeandroNunes
jpg	navegador.jpg	manage	25.1 K	10 Oct 2006 - 21:24	LeandroNunes

Topic revision: r2 - 10 Oct 2006, LeandroNunes

Tech

O Conteúdo deste site está licenciado sob a Licença Creative Atribuição-Uso Não-Comercial Compartilhamento pela mesma Licença 2.5 Brasil Commons.

Copyright © 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