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.

Apostila de como desenvolver aplicativos para Orkut, iGoogle e MySpace

Sabe aqueles aplicativos do orkut e do iGoogle? Eles são desenvolvidos utilizando OpenSocial.

O OpenSocial é um serviço que oferece APIs para desenvolver aplicativos para redes sociais, como Orkut, iGoogle, hi5, MySpace entre outros.

Opensocial - api para desenvolver aplicativos para Orkut, iGoogle, MySpace

Apenas com JavaScript e HTML é possível criar aplicativos no OpenSocial.

No momento estou criando um widget e devido a dificuldade de encontrar documentação, juntei tudo que consegui, em português, e montei uma apostila do OpenSocial. São 103 páginas, do documentação disponibilizada pela google, em formato pdf.

Quem for desenvolver alguma coisa, me adiciona do sandbox.
=)

A apostila está disponível aqui.