Adicionar um botão na caixa de respostas pra pré-visualização dos tópicos rapidamente.
Atenção
O código não funciona com BBCode só com HTML.


1º - Código a ser utilizado:

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()
});
});

2º - Aplicação do tutorial:
Aceda à:
Painel de Controle  :seta:  Módulos  :seta:  HTML & JavaScript  :seta:  Gestão dos Códigos JavaScript



Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Localização São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Nos Tópicos.
Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas JavaScript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

3º - Código CSS a ser utilizado:

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;
}

4º - Aplicando o código CSS:
Agora deverá seguir um esquema de onde o código deverá ser adicionado:
Painel de Controle  :seta2:  Visualização  :seta2:  Imagens e Cores  :seta2:  Cores   :seta2: Folha de estilo CSS


5º - Resultado final:

Bacana '-'

Otimo, mas kd os creditos?

Olá

Créditos adicionado, mais alguma coisa?

Até mais

Os creditos sao de © SH-Design & HenRyqUéè

Olá

Pronto, Mais alguma coisa?

Até mais

Otimo está de parabens