Editor web WYSIWYG simples – Plugin de FCKEditor pra jQuery

O FCKEditor é um editor WYSIWYG (What You See Is What You Get) muito completo, e bem simples de ser implementado.

Como funciona?
Você escreve uma textarea comum e chama o FCK que esconde a textarea e coloca um editor web. E toda vez que o texto é alterado, ele coloca o texto formatado (com tags html) dentro do textarea. Sendo assim, um técnica pura de javascript, funciona em qualquer navegador e qualquer linguagem de programação: php, asp, .net, java, etc.

Com o plugin jQuery FCKEditor Plugin v1.3 fica mais fácil ainda pra quem já trabalha com jQuery. Além disso o FCK Editor para jQuery consegue trabalhar com o jQuery Validate e com o jQuery Form Plugin.

Tutorial de como implementar o editor web.

Baixe os arquivos jQuery, o FCK Editor e o Plugin dele pra jQuery .

Adicione o código dentro da tag da sua página:

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.FCKEditor.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$.fck.config = {path: '_scripts/fckeditor/'};
		$('textarea#fckExemplo').fck({height:220, width:455});
	});
</script>

Sendo que o path, é o caminho da pasta de onde vc deixou a pasta do fck editor.

Depois é só escrever o textarea no seu html.

<textarea name="fckExemplo" id="fckExemplo"> 
	Teste de <strong>conteúdo</strong> 
</textarea>

Sendo que, o que vier dentro do textarea, será interpretado dentro do editor.

Como personalizar a barra de ferramentas

Se você seguiu o tutorial, viu que por padrão, o FCK tem centenas de botões (tem mais botões que o word, sem exagero), então, é necessário configurar a criar uma barra de ferramentas personalizada.

Para fazer isso, entre na pasta do fckeditor e abra o arquivo fckconfig.js
Na linha 101 e 118, existem duas toolbars, siga a mesma estrutura e crie a sua com os botões que desejar, coloque um nome pra ela, como “TextoSimples” por exemplo.
Depois disso, para invocá-la, você adiciona um parâmetro na hora de chamar o fck:

 $('textarea#fckExemplo').fck({
	height:220, 
	width:455,
	toolbar:'TextoSimples'
});

Vejam o exemplo, como ficou:

Um detalhe bem importante: por questões de segurança o FCK não funciona se você quiser rodar em um ambiente local. É necessário que esteja num servidor (pode ser um apache / iis / tomcat na sua máquina) só para acessar por http://

Visitem a página do plugin e o site do FCK Editor para obter mais informações.

Vida mais fácil com o novo Dreamweaver CS4

Essa semana a Adobe anunciou o novo pacote de Creative Suite, o CS4 após 1 ano e meio de CS3 no mercado. O CS3, que foi o primeiro pacote a integrar os softwares da Adobe com os da extinta Macromedia não trouxe grandes mudanças aos usuários do Dreamweaver. Na versão CS4, essa integração ficou ainda maior, e as mudanças no Dreamweaver parecem deixar o software mais atrativo.

Em evento online realizado hoje pelo pessoal do MXStudio, as mudanças foram apresentadas e indicam melhorias. Os principais novos recursos são:

– Live View: O Live View é um browser dentro do Dreamweaver. A idéia é que as modificações feitas no código (em layout ou interação), possam ser visualizadas no próprio arquivo, sem precisar ficar abrindo o browser para teste. Parece promissor, desde que funcione com mais fidelidade que o tal modo “Visual” do Dreamweaver atual.

– Code Hint para frameworks e Ajax: Esse recurso é uma novidade importante. No post anterior, o Danilo comentou sobre o crescimento do Jquery e das bibliotecas de interação em Javascript, que vêm ganhando mercado. Que bom que a Adobe está prestando atenção nisso, e ajudou os desenvolvedores na tarefa. Segundo o site oficial da Adobe, vai ser possível “incorporar estruturas JavaScript populares, incluindo jQuery, Prototype e Spry”.

– Related files: Mais um recurso que promete ser bem interessante. Vai ser familiar para quem costuma utilizar o “Inspect” do Firebug. Ao clicar em um elemento no modo de visualização do Dreamweaver, os arquivos que determinam aquele elemento são imediatamente relacionados, tornando bem mais fácil encontrar e editar o código.

Alguns outros recursos foram adicionados também, mas como eles são excessivamente WYSIWYG não procurei saber em detalhes. Só para constar, são recursos como o Photoshop Smart Objects (uma espécie de integração entre o arquivo .PSD e o Dreamweaver, fazendo com que alterações feitas em um, sejam simultaneamente aplicadas no outro) e o Adobe InContext Edit (cria áreas com “permissão” de edição pra usuários finais – socorro!).

De modo geral, parece que vai agregar funcionalidades interessantes ao Dreamweaver. Particularmente, acho um software bacana, desde que usado como um editor de código, e não como uma ferramenta essencial para o desenvolvimento. Já vi muita porcaria feita, zilhões de ids de css chamados de style1, style2, style3 e htmls com tabelas geradas automaticamente pelo Dreamweaver.

Mas nesse caso, o problema são os usuários do produto, que ao invés de tratá-lo como ferramenta, utilizam como matéria-prima para desenvolvimento. Se você gosta do Dreamweaver, as novas funcionalidades do CS4 vão ser de grande valia. ;)

Para quem quiser saber mais assista à palestra online de apresentação do Pacote CS4 feita pelo Danilo Santana.