Criar botão para formatação

Qual é minha questão:
Acima do bloco, onde irei formatar meu post, existe botões de formatação.
No meu fórum, tem um botão "outros", que quando clico tem várias opções.

Gostaria de criar um botão como o "outros", só que escrito "neon" e ao clicar em "neon" vai aparecer vários, como: Neon azul, vermelho, amarelo.

E ao clicar sobre algum tipo ira sair uma tag HTML.

Me ajudem, obrigado.

Endereço do meu fórum:
http://transfor-discussoes.forumeiros.com

Versão do fórum:
INVISION

Olá!

Aceda á "Folha de estilos CSS"
Painel de Controle Visualização Imagens e Cores Cores Folha de estilos CSS

Código:

Código:

az, bl, azul, blue, .az {text-shadow: 0px 0px 5px blue;color: blue;}
v, vermelho, red, .v {text-shadow: 0px 0px 5px red;color: red;}
rx, roxo, purple, rox, .rx {text-shadow: 0px 0px 5px #b300ff;color: #b300ff;}
am, amarelo, yelow, .am {text-shadow: 0px 0px 5px #fbff00;color: #fbff00;}
c, ciano, cyan, .c {text-shadow: 0px 0px 5px #00e6ff;color: #00e6ff;}
r, rosa, pink, .r {text-shadow: 0px 0px 5px #ff7fee;color: #ff7fee;}
vr, verde, green, .vr {text-shadow: 0px 0px 5px #11ff00;color: #11ff00;}
l, laranja, orange, naruto, .l {text-shadow: 0px 0px 5px #ff9500;color: #ff9500;}
m, marron, brown, .m {text-shadow: 0px 0px 5px #7d4f0f;color: #7d4f0f;}
w, branco, white, .w {text-shadow: 0px 0px 5px #ffffff;}
pr, preto, black, .pr {text-shadow: 0px 0px 5px #000000;}
sp, .sp {text-shadow: 0px 0px 5px #0072ff;color: #0072ff !important;}
#text_editor_controls, .left-box{position:relative !important}

Valide.

Feito isto,
Aceda à "Gestão dos códigos JavaScript":
Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos Códigos JavaScript

Clique em "Criar um novo JavaScript".

Título Escolha o título que quiser
Investimento

Codigo JavaScript:

Código:

jQuery(document).ready(function() {
jQuery('#text_editor_controls button:eq(8)').after(' <button class="button2" onclick="display();return false"><az><b>Neon</b></az></button><style>.cred{background:#fff url(http://i42.servimg.com/u/f42/17/32/13/00/letrei10.png) no-repeat bottom right;padding-right:17px;}</style><div style="width:100px !important;margin-top:21px;margin-left:290px;visibility:hidden;" class="select cred" id="neon"><button class="sp" onclick="displayspd();return false">SP-Design</button><br /><button class="az" onclick="displayblue();return false">Neon Azul</button><br /><button class="v" onclick="displayred();return false">Neon Vermelho</button><br /><button class="rx" onclick="displayrx();return false">Neon Roxo</button><br /><button class="am" onclick="displayam();return false">Neon Amarelo</button><br /><button class="c" onclick="displayc();return false">Neon ciano</button><br /><button class="r" onclick="displayr();return false">Neon rosa</button><br /><button class="vr" onclick="displayvr();return false">Neon Verde</button><br /><button class="l" onclick="displayl();return false">Neon laranja</button><br /><button class="m" onclick="displaym();return false">Neon Marrom</button><br /><button class="w" onclick="displayw();return false">Neon branco</button><br /><button class="pr" onclick="displaypr();return false">Neon Preto</button><br /></div> ');
});

Clique em "Confirmar".

Agora, vamos inserir outro código CSS:
Painel de controle ->> Visualização ->> Imagens e cores ->> Cores ->> Folha de estilos CSS ->>

Código:

function display(){
selectWysiwyg(this,'neon');return false}
function displayspd(){
bbfontstyle('<sp>','</sp>');selectWysiwyg(this,'neon');return false}
function displayblue(){
bbfontstyle('<az>','</az>');selectWysiwyg(this,'neon');return false}
function displayred(){
bbfontstyle('<v>','</v>');selectWysiwyg(this,'neon');return false}
function displayrx(){
bbfontstyle('<rx>','</rx>');selectWysiwyg(this,'neon');return false}
function displayam(){
bbfontstyle('<am>','</am>');selectWysiwyg(this,'neon');return false}
function displayc(){
bbfontstyle('<c>','</c>');selectWysiwyg(this,'neon');return false}
function displayr(){
bbfontstyle('<r>','</r>');selectWysiwyg(this,'neon');return false}
function displayvr(){
bbfontstyle('<vr>','</vr>');selectWysiwyg(this,'neon');return false}
function displayl(){
bbfontstyle('<l>','</l>');selectWysiwyg(this,'neon');return false}
function displaym(){
bbfontstyle('<m>','</m>');selectWysiwyg(this,'neon');return false}
function displayw(){
bbfontstyle('<w>','</w>');selectWysiwyg(this,'neon');return false}
function displaypr(){
bbfontstyle('<pr>','</pr>');selectWysiwyg(this,'neon');return false}

Melhores cumprimentos,
Today

Sim, mas eu criei minhas próprias tags em neon. Como devo formatar para deixar de acordo?

Código:

nv{color: #00ff00; text-shadow: 0 0 7px #00ff00}
na{color: #0015FF; text-shadow: 0 0 7px #0015FF}
nl{color: #bfb12b; text-shadow: 0 0 7px #bfb12b}
nvo{color: #ff0000; text-shadow: 0 0 7px #ff0000}
nam{color: #FFFF00; text-shadow: 0 0 7px #FFFF00}
nr{color: #ff00ff; text-shadow 0 0 7px #ff00ff}
nm{color: #918744; text-shadow 0 0 7px #918744}
nrx{color: #BF1D86; text-shadow 0 0 7px #BF1D86}
off{color: #1C3C41; text-shadow 0 0 7px #1C3C41}
adm{color: #EB1D50; text-shadow 0 0 7px #EB1D50}
mod{color: #BBBD2F; text-shadow 0 0 7px #BBBD2F}
sent{color: #2DCF73; text-shadow 0 0 7px #2DCF73}
des{color: #ED66EB; text-shadow 0 0 7px #ED66EB}
fdf{color: #96D9D6; text-shadow 0 0 7px #96D9D6}
mds{color: #BBBD2F; text-shadow 0 0 7px #BBBD2F}
stg{color: #0048FF; text-shadow 0 0 7px #0048FF}
fnd{color: #009d9d; text-shadow 0 0 7px #009d9d}

Olá amigo!

Ao caso o senhor terá que fazer estas mudanças. Infelizmente não editamos nem damos suporte à códigos Java Script, lamento!

Até mais!