Colocar um seletor com codigos prontos na resposta rápida

Qual é minha questão:
Olá, queria saber se é possível colocar um menu seletor ou botões na caixa de resposta rápida ou próximo a ela que tenha códigos prontos.

Vou explicar melhor.

Por exemplo, tivesse opções de Ataque, Defesa. Se clicasse no ataque apareceria na caixa de resposta já o codigo formatado assim:

Descrição do duelo:
Digite aqui como chegou no campo de batalha

Habilidade de ataque:
Digite aqui a habilidade de ataque que irá usar.

Deu pra entender? Pode ser somente com isso que aí o resto do código eu iria acrescentando.

Até mais.

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

Crie um novo JavaScript com investimento em todas as páginas e adicione:

Código:

$(document).on('ready', function () {
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-duelo" style="display:none;margin-top: 27px;"><div><label for="duelodesc" style="text-align:left;" >Descrição do duelo: </label><input type="text" id="duelodesc" style = "float:left" placeholder="Insira descrição aqui...">
<label for="duelohab" style="text-align:left;">Habilidade de ataque: </label><input type="text" id="duelohab" style = "float:left" placeholder="Insira habilidade aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>'); 
 $('<a class="sceditor-button bbcode-duelo"  title="Duelo"><div style="background-image:url(https://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/fortress.png)">Quadrado</div></a>').insertBefore('.sceditor-button-quote').click(function () {
var f = $(".sceditor-duelo").css("display");
if(f =='none') {$(".sceditor-duelo").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-duelo").hide(); }
});
$(".sceditor-duelo .button").click(function () {
var desc = $(".sceditor-duelo #duelodesc").val();
var hab = $(".sceditor-duelo #duelohab").val();
$('#text_editor_textarea').sceditor("instance").insert('[b]Descrição do duelo:[/b]\n'+desc+'\n\n[b]Habilidade de ataque:[/b]\n'+hab+'');
});
});

O botão aparecerá ao lado do botão de quote da resposta rápida. Até mais!

Funcionou perfeitamente, mas eu tenho três questões:

Tem como nesse primeiro "Descrição do duelo" fazer um pouco maior, como uma caixa texto? Pois nesse campo eles vão descrever uma pequena história.

E como faço se eu quiser adicionar outro botão ao lado dele? Eu adiciono outro JS ou da pra adicionar nesse script mesmo?

E por fim, como faço pra excluir os botões "Data atual" e "Hora atual"?

Troque o código por este:

Código:

$(document).on('ready', function () {
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-duelo" style="display:none;margin-top: 27px;"><div><label for="duelodesc" style="text-align:left;" >Descrição do duelo: </label><textarea id="duelodesc" style = "float:left;min-width: 159px;min-height: 75px;" placeholder="Insira descrição aqui..."></textarea>
<label for="duelohab" style="text-align:left;">Habilidade de ataque: </label><input type="text" id="duelohab" style = "float:left" placeholder="Insira habilidade aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>'); 
 $('<a class="sceditor-button bbcode-duelo"  title="Duelo"><div style="background-image:url(https://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/fortress.png)">Quadrado</div></a>').insertBefore('.sceditor-button-quote').click(function () {
var f = $(".sceditor-duelo").css("display");
if(f =='none') {$(".sceditor-duelo").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-duelo").hide(); }
});
$(".sceditor-duelo .button").click(function () {
var desc = $(".sceditor-duelo #duelodesc").val();
var hab = $(".sceditor-duelo #duelohab").val();
$('#text_editor_textarea').sceditor("instance").insert('[b]Descrição do duelo:[/b]\n'+desc+'\n\n[b]Habilidade de ataque:[/b]\n'+hab+'');
});
});

Se quiser adicionar mais botões, no mesmo script repita esta parte:

Código:

$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-duelo" style="display:none;margin-top: 27px;"><div><label for="duelodesc" style="text-align:left;" >Descrição do duelo: </label><textarea id="duelodesc" style = "float:left;min-width: 159px;min-height: 75px;" placeholder="Insira descrição aqui..."></textarea>
<label for="duelohab" style="text-align:left;">Habilidade de ataque: </label><input type="text" id="duelohab" style = "float:left" placeholder="Insira habilidade aqui..."><input type="button" style = "margin-top: 15px;"class="button" value="insert"></div></div>'); 
 $('<a class="sceditor-button bbcode-duelo"  title="Duelo"><div style="background-image:url(https://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/fortress.png)">Quadrado</div></a>').insertBefore('.sceditor-button-quote').click(function () {
var f = $(".sceditor-duelo").css("display");
if(f =='none') {$(".sceditor-duelo").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-duelo").hide(); }
});
$(".sceditor-duelo .button").click(function () {
var desc = $(".sceditor-duelo #duelodesc").val();
var hab = $(".sceditor-duelo #duelohab").val();
$('#text_editor_textarea').sceditor("instance").insert('[b]Descrição do duelo:[/b]\n'+desc+'\n\n[b]Habilidade de ataque:[/b]\n'+hab+'');
});

mudando o que for necessário.
Quanto ao data e hora, poderia ser mais específico com imagens? Até mais!

Me refiro a esses dois botões:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Agora, seguindo esse mesmo sistema, tem como colocar um botão desse só que ao invés de ter campo pra digitar, mostrar outros botões que ao clicar já cai o código pronto na resposta rápida? Vou tentar explicar melhor na print abaixo:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Pra ocultar o de data e hora adicione ao css:

Código:

.sceditor-button-date, .sceditor-button-time {display: none !important;}

Pra fazer um bbcode de lista de magia crie um novo JS com investimento em todas as páginas e adicione:

Código:

$(document).on('ready', function () {
$(".sceditor-container").append('<div class="sceditor-dropdown sceditor-duelo" style="display:none;margin-top: 27px;"><div>
<input type="button" class="magia1" value="Magia 1"><br />
<input type="button" class="magia2" value="Magia 2"><br />
<input type="button" class="magia3" value="Magia 3"><br />
<input type="button" class="magia4" value="Magia 4">
</div></div>'); 
 $('<a class="sceditor-button bbcode-duelo"  title="Duelo"><div style="background-image:url(https://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/fortress.png)">Quadrado</div></a>').insertBefore('.sceditor-button-quote').click(function () {
var f = $(".sceditor-duelo").css("display");
if(f =='none') {$(".sceditor-duelo").css({"left": $(this).position().left , "top": $(this).position().top, }).show(); }
else {$(".sceditor-duelo").hide(); }
});
$(".sceditor-duelo .magia1").click(function () {
$('#text_editor_textarea').sceditor("instance").insert('[spoiler]magia 1[/spoiler]');
});
$(".sceditor-duelo .magia2").click(function () {
$('#text_editor_textarea').sceditor("instance").insert('[spoiler]magia 2[/spoiler]');
});
$(".sceditor-duelo .magia3").click(function () {
$('#text_editor_textarea').sceditor("instance").insert('[spoiler]magia 3[/spoiler]');
});
$(".sceditor-duelo .magia4").click(function () {
$('#text_editor_textarea').sceditor("instance").insert('[spoiler]magia 4[/spoiler]');
});
});

Até mais!

Caraca Daemon, tu é demais. Valeu amigão, pode fechar.

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]Movido para: Arquivo - Pedido de código