--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Botão "Pré-Visualizar Rápido" no post  

1º - Adicionando o código JavaScript...
Aceda em: Novo código JavaScript


Título: Coloque qualquer tpitulo;
Envestimento: Marque "Nos Tópicos";
Código JavaScript: Cole o seguinte código:

Código:

$(document).ready(function(){
var cont = $("#text_editor_textarea").val();
$("input.button2[value='Enviar']").after('<input style="margin-left:4px" type="button" id="p-r" class="button2" value="Pré-Visualizar Rápido">');
$("input.button2[value='Pré-Visualizar Rápido']").after('<p><p><br><center><div id="pre" style=""><pre style="text-align:left;font-size:14px" id="cttr"></pre></div></center>');
$("#text_editor_textarea").keydown(function(){
var cont = $("#text_editor_textarea").val();
$("#cttr").html(cont);
}).keyup(function(){
var cont = $("#text_editor_textarea").val();
$("#cttr").html(cont);
});
$("#cttr").html(cont);
$("#pre").hide();
$("#p-r").click(function(){
$("#pre").slideToggle()
});
});

Salve!

2º - Adicionano o código CSS...
Aceda em: Folha de Estilo CSS

Código:

#pre{
padding:10px;
  border-radius:6px;
 background: rgb(229,230,150);
background: -moz-linear-gradient(top,  rgba(229,230,150,1) 0%, rgba(209,211,96,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,230,150,1)), color-stop(100%,rgba(209,211,96,1)));
background: -webkit-linear-gradient(top,  rgba(229,230,150,1) 0%,rgba(209,211,96,1) 100%);
background: -o-linear-gradient(top,  rgba(229,230,150,1) 0%,rgba(209,211,96,1) 100%);
background: -ms-linear-gradient(top,  rgba(229,230,150,1) 0%,rgba(209,211,96,1) 100%);
background: linear-gradient(to bottom,  rgba(229,230,150,1) 0%,rgba(209,211,96,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e696', endColorstr='#d1d360',GradientType=0 );
border:3px solid #D19D36;
    width:auto;
}

Valide!

3º - Resultado...

• Funciona em quais versões?
  Testado apenas em PHPBB3 e PUNBB, mas creio que resulta nas demais.
  

---

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [TUTORIAL] Botão "Pré-Visualizar Rápido" no post

Bem interessante esse codigo, obrigado por compartilhar.

Parece com aquele que distribuiram a quem compraram na época, mas esse tem um visu bem melhor =)

Você realmente adora abusar de gradient ein véi .-.

Só pra te lembrar, membros não costumam usar tags html nessa hora, eles usam BBCode, e como todos sabem bbcode não é uma linguagem e sim um atalho/facilitação para os usuários inexperientes, eu olhei seu código e ele não irá renderizar os bbcodes --'


E o style que eu fiz pro ta meu mais bunitin ta Bookmarlucas654 uhauhauha

Kkkkkkk sim, errei quando fui expressar, calma. O que ele postou tem um efeito 'melhor', mas o seu... você projetou ele muito bem. O ruim é que ambos não pegam todos os códigos rsrs ;s

Switch escreveu:
Você realmente adora abusar de gradient ein véi .-.

Só pra te lembrar, membros não costumam usar tags html nessa hora, eles usam BBCode, e como todos sabem bbcode não é uma linguagem e sim um atalho/facilitação para os usuários inexperientes, eu olhei seu código e ele não irá renderizar os bbcodes --'


E o style que eu fiz pro ta meu mais bunitin ta Bookmarlucas654 uhauhauha

auhuahhau gradientes saõ minha vida ~~" é eu tava com pressa pra ir pro trabalho e nem renderizei as tags, mas depois eu faço isso, no mais todos pricipais funcionam, só mesmo as listas e as formatações de alinhamento de texto (menos o center) é claro, se renderizar...

Seria bom um que decifre BB Code

muito bom amigo
gostei e muito útil

Nao funciona en phpbb2

teste