HowTo: Como integrar o editor TinyMCE com LightBox.
- Definições:
TinyMCE – é um editor Javascript HTML WYSIWYG multi-plataforma, web based. É usado principalmente em sistemas de notícias, onde fornece uma interface semelhante a um editor de texto, permitindo realizar praticamente toda a formatação necessária em um bloco de texto. Site oficial: http://tinymce.moxiecode.com/ - LightBox – É um script que permite fazer sobreposição de imagens á página corrente e não dentro da página. Isto faz com que as imagens não sejam limitadas por um layout. Página oficial: http://www.huddletogether.com/projects/lightbox2/
Exemplo de utilização: Esta sendo muito usado, o efeito LightBox dentro de sistemas de notícias, o G1 é um exemplo, confira:
http://g1.globo.com/Noticias/Mundo/0,,MUL268938-5602,00.html,
basta clicar em uma das fotos.
Agora você não precisa ficar quebrando a cabeça pra poder fazer isso, é tudo muito, mas muito simples.
============================================================
1 . Você deve baixar o material necessário:
TinyMCE – http://tinymce.moxiecode.com/download.php
Baixe a última versão disponível. Você depois pode baixar no mesmo local, o pacote de idiomas, que tem para o português também. É fácil fazer a mudança, no próprio site ensina, só não iremos falar aqui porque não é o objetivo deste howto.
Já falamos aqui, em outra oportunidade, que o TinyMCE não possui um assistente de upload de fotos, mas que você pode usar o plugin Ibrowser para isso, se estiver usando PHP. Se for ASP, JSP, CFM ou qualquer outra linguagem pode se utilizar o TinyFCK.
LightBox2 – http://www.huddletogether.com/projects/lightbox2/#download
Também, baixe a última versão.
============================================================
1 . Configurando:
- Descompacte o arquivo baixado, você vai ter uma basta chamada examples, com dicas e modelos para você ver como implementar em seu formulário, e outra chamada jscripts, com os scripts necessários para que o TinyMCE funcione.
- Copie a pasta jscripts para dentro de seu projeto. Se você já tiver uma pasta de JavaScript em seu projeto, copie somente a pasta que fica dentro dela, a tiny_mce que é onde fica todos os scripts.
Na sua página que faz a inserção do conteúdo através de um formulário com os campos de Text e Textarea, você vai editar, inserindo entre as tags <head>:
<!– TinyMCE –>
<!–aqui você deve indicar o caminho correto, dentro de seu projeto, onde se encontra a pasta tiny_mce que você copiou anteriormente–>
<script type=”text/javascript” src=”jscripts/tiny_mce/tiny_mce.js”></script>
<script type=”text/javascript”>
tinyMCE.init({
// General options
mode : “textareas”,
theme : “advanced”,
plugins : “safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template”,
// Theme options
theme_advanced_buttons1 : “save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect”,
theme_advanced_buttons2 : “cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor”,
theme_advanced_buttons3 : “tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen”,
theme_advanced_buttons4 : “insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak”,
theme_advanced_toolbar_location : “top”,
theme_advanced_toolbar_align : “left”,
theme_advanced_statusbar_location : “bottom”,
theme_advanced_resizing : true,
});
</script>
<!– /TinyMCE –>
É claro que tem outras opções, é so você ver o código fonte dos exemplos, na pasta examples.
Quando você terminar, seu formulário terá mais ou menos essa aparência:
Ou seja, os campos Textarea automaticamente assumirão o editor de texto.
2. Para que o efeito LighBox funcione:
- Você vai inserir imagens normalmente, através do botão inserir imagem do editor. Se você estiver usando o Ibrowser, terá um botão exclusivo para isso, se não estiver usando será o botão padrão, sendo que neste caso a imagem já deve estar carregada em algum lugar, podendo ser uma imagem de um outro site, por exemplo, copie e cole este endereço, no campo URL da imagem:
http://www.funpic.hu/files/pics/00002/00002281.jpg
- Depois de inserir a imagem, você pode redimensionar conforme ficar melhor pra você.
- Agora você clica na imagem, e depois escolhe o botão Insert/Edit Link, que é o desenho de uma corrente. Vai surgir uma outra janela, você então vai colar novamente a URL da imagem que você quer que ele abra: http://www.funpic.hu/files/pics/00002/00002281.jpg
- Na mesma janela, você tem a opção Title, ai você vai colocar uma descrição da foto, que vai aparecer quando a foto for clicada, exemplo: Gato Fumando.
- Clique na aba Advanced, vá até o combo Relationship page to target, e escolha a opção Lightbox, e pronto.
3. Configurando a página de resultado.
Na página que exibe as notícias, você vai ter que inserir as propriedades do LightBox, antes da tag <head>:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></scriptÉ claro que você já pegou esses JavaScripts, e copiou para a pasta JS de seu projeto né?
Ai é so colocar também o CSS do Lightbox:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />Pronto, já deve funcionar…
Até a próxima.
