Criando um Editor de texto com GRails e RichUI Plugin
02/04/2008 00:00
0
Olá pessoal,

Como a idéia desse fórum é dar guide lines rápidos e objetivos, neste tópico vamos criar um Editor de textos usando um ótimo plugin para o GRails, que é o RichUI, ideal para melhorar os CRUDs e dar mais liberdade ao usuário.

Bom, em primeiro lugar, vamos criar uma simples app chamada textarea e acessá-la

grails create-app rich


cd rich


O próximo passo é instalar o plugin do richui.

grails install-plugin richui


Pronto, agora a nossa app já está pronta para usar os recursos deste plugin.

Vamos criar um controller que vai servir para acessarmos a página

grails create-controller textarea


Agora, vamos editar o nosso controller e criar uma action chamada "simple" (a primeira textarea será do tipo simples), sem lógica, apenas para chamar o nosso arquivo simple.gsp (que criaremos em grails-app/textarea/simple.gsp com o conteúdo abaixo).

action simple
def simple = { }


simple.gsp
<html>
<head>
<title>Editor de texto com GRails</title>
</head>
<body>
<h1>Um simples editor html usando GRrails e RichUi plugin</h1>
</body>
</html>


Pronto, vamos fazer um teste inicial, rodar a aplicação e acessar nossa action &quot;simple&quot;

grails run-app


e acessá-la através da url

http&#58;//localhost&#58;8080/rich/textarea/simple


Pronto, com isso temos na tela a mensagem &quot;Um simples editor html usando GRrails e RichUi plugin&quot;

Agora, para inserir o textarea, vamos incluir as dependencias de javascript que o componente tem, e para isto basta dentro do head da página, incluir a tag:

<resource&#58;richTextEditor type=&quot;simple&quot;/>


e no body da página, fazer a chamada para nosso richtexteditor:

<richui&#58;richTextEditor name=&quot;texto&quot; width=&quot;600&quot;/>


Deixando finalmente nosso simple.gsp da maneira abaixo:

<html>
<head>
<title>Editor de texto com GRails</title>
<resource&#58;richTextEditor type=&quot;simple&quot;/>
</head>
<body>
<h1>Um simples editor html usando GRrails e RichUi plugin</h1>
<richui&#58;richTextEditor name=&quot;texto&quot; width=&quot;600&quot;/>
</body>
</html>


Pronto, acessando novamente a url, vemos a imagem abaixo e temos um editor pronto a ser usado!

Simple



Agora, vamos criar mais 3 editores (medium, advanced e full). Para cada um deles, criaremos uma action no controller, uma view simples, e alterar o parâmetro type que passamos na tag resource! O resultado final se parece com as screenshots abaixo, basta acessar:

http&#58;//localhost&#58;8080/rich/textarea/medium
http&#58;//localhost&#58;8080/rich/textarea/advanced
http&#58;//localhost&#58;8080/rich/textarea/full


Medium


Advanced


Full


É isso aí! Simples e objetivo!

[]s,
Tags: Snippets


Ainda não faz parte da comunidade???

Para se registrar, clique aqui.


Aprenda Groovy e Grails com a Formação itexto!

Newsletter Semana Groovy

Assinar

Envie seu link!


Livro de Grails


/dev/All

Os melhores blogs de TI (e em português) em um único lugar!

 
Creative Commons
RSS Grails Brasil é mantido por itexto Consultoria.
Em caso de problemas contacte Henrique Lobo Weissmann (Kico) por e-mail: kico@itexto.com.br
Todo o conteúdo presente neste site adota o Creative Commons como licença padrão.
Ver: 4.14.0
itexto