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.
Veja também...
- Howto – Integrando TinyMCE com FCKEditor em JSP
- Howto: Executar dumps extensos com phpMyAdmin
- Importar JavaScript dentro de outro JavaScript
- Pixer – Editor Online de Fotos!
- Integrando o SlideShowPro ao WordPress
Related posts brought to you by Yet Another Related Posts Plugin.
Olá, fiz todos os testes possíveis dentro da didática passada neste tutorial mas não funcionou, estou usando o TinyMCE já como editor de notícias, e gostaria de inserir o lightbox para oferecer melhores condições visuais sem ter que usar pop-ups… Se puderem ajudar-me pode enviar para o meu e-mail e agradeço desde já.
Muito bom cara! Achei show de bola!
Faltou colocar o “,builder” na linha do scriptaculos. Ex:
Outra coisa, o TinyMce não cria a rel=”lightbox”. Vou estudar o porquê.
Abraço
[...] a não desistir no primeiro obstáculo. Obrigada Anny pela a instalação e meu agradecimento ao Thunder Boy pelo tutorial. Não é que cconsegui… Clique aqui, por favor… [...]
Ola boa tarde a todos gostaria muito dessa materia mas nao consegui fazer o tuturial aguem “os que conseguiram” poderia compartilhar os arquivos com os “lamers que nao conseguiram” espero resposta desde já agradeço a todos
Estou com um problema: instalei o wysiwyg 6 e pretendo criar uma galeria de fotos usando o lightbox. Já descompactei a pasta do lightbox dentro da pasta do wysiwyg só que não consigo colocá-lo dentro da barra toolbox para utilizá-lo. Podem me ajudar?
Obrigado.
[...] a não desistir no primeiro obstáculo. Obrigada Anny pela a instalação e meu agradecimento ao Thunder Boy pelo tutorial. Não é que consegui… Clique aqui, por favor… [...]
Hello THUNDER BOY !!!
e ae blz? tô com um pepino por aqui olha só,,
estou fazendo um editor de notícias dai na minha inserção e alteração uso um formulário com textArea usando tinyMce, este formulário é sobreposto na pagina com o mesmo efeito do LightBox ou seja , crio uma div com fundo esmuecido e dai o formulário em cima ( usando z inde ) mas ok isso tá correto, ele insere e altera, maravilha.
Porém…
Quando insiro pela primeira vez ou altero pela primeira vez ele faz tudo certo , agora se eu altero uma vez e depois tento alterar de novo, não consigo no javascript pegar o valor do textarea usando :: mensagem=tinyMCE.get(‘elm1′).getContent();::
o estranho é que na primeira vez ele aceita, na segunda não,, e ele carrega o tinymce na segunda, ou seja a mesma função javasacript que uso na primeira não é executada pois nao consegue pegar o valor do textarea,, alguma solução?
Se puder me enviar por email agradeço.
Algumas possíveis soluções:
- http://www.webmasterworld.com/php/4071533.htm
- http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=64634