HowTo: Editor TinyMCE com LightBox

Jonas Artigos, HowTo - Como fazer

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.

12 thoughts to “HowTo: Editor TinyMCE com LightBox”

  1. 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á.

  4. Pingback: Flydreams

  5. 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

  6. 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.

  7. Pingback: detalhes.org » Blog Archive » Harry Potter

  8. 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.

  10. Pingback: ∿Detalhes∿ » Blog Archive » Harry Potter

  11. Amigo muito obrigado mesmo! fiquei feito louco procurando isso na net e só achei aqui no seu site! valeu mesmo! Parabéns pelo trabalho

  12. Pingback: Harry Potter ◂ Detalhes da Vida

Leave a Reply

Your email address will not be published. Required fields are marked *