Ferramentas BBCode

Detalhes da questão

Endereço do fórum: http://la-nwd.forumeiros.com/
Versão do fórum: PhpBB3

Descrição

Gostaria de aprender a como colocar essa barra de ferramentas de BBCODE, vi um monte de tópicos relacionados a isso, mais não consegui entender nenhum...

https://i.imgur.com/svL36Io.png

Gostaria dessa barrinha de BBCODE para  coloca no meu formulário de postagem

Olá @Whiskey

Poderia nos ceder o formulário que deseja colocar?
Até! 

Mais é craru rapais, formulário completo rs

Código:

<br /><br /><script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
               <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <script src="http://ajuda.forumeiros.com/29110.js"></script>
                <script src="http://ajuda.forumeiros.com/28074.js"></script>
                <style>
            #generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
 
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
 
#generated_form dl {
   margin-bottom: 10px;
   font-size: 1.1em;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
 
#generated_form dt {
   width: 30%;
   padding-top: 5px;
   border: none;
   float: left;
}
 
#generated_form dd {
   padding: 5px;
   padding-right: 5px;
   margin-left: 30%;
   vertical-align: middle;
}
#generated_form dl:hover dt {
   color: #666;
}
 
#generated_form input {
   font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   color: #333333;
   padding: 2px;
   vertical-align: middle;
   padding-left: 4px;
}
 
#generated_form input[disabled] {
   background-color:#ddd;
   cursor:pointer;
}
 
#generated_form select {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   cursor: default;
   vertical-align: middle;
   width:auto;
   max-width:100%;/* Bug IE */
   padding: 1px;
}
 
#generated_form textarea {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   width: 300px;
   height: 100px;
   padding: 2px;
   padding-left: 4px;
   cursor: text;
}
 
#generated_form input[type=text], #generated_form input[type=fields_list] {
   width: 300px;
   cursor: text;
}
</style>
          


 <form onsubmit="submit_form();" action="/posting.forum" id="generated_form" method="post" enctype="multipart/form-data">

 <input type="hidden" name="form_mode" value="0">
  <dd><br /><span style="font-size: 18px; line-height: normal"><strong>® Formulário de Recrutamento </strong></span>
    <dl></dl>
  SEU NICK:
  <dl><input type="text" data-type="field" value="" id="field0"></dl>
    <dl></dl>
    SEU LEVEL:
  <dl><input type="number" min="0" max="99999" data-type="field" value="" step="0" id="field1"></dl>
    QUAIS CLÃ JÁ PARTICIPOU:
  <dl><input type="text" data-type="field" value="" id="field2"></dl>
    <dl></dl>
    POR QUÊ DESEJA ENTRAR PRO CLÃ:
    <dl><textarea data-type="field" id="field3"></textarea></dl></dd>
 
                <input type="hidden" name="f" value="2">
                <input type="hidden" name="subject" value="O script não enviou o título" template="[ Recrutamento ]  {field0} ">
                <input type="hidden" name="description" value="O script não enviou a descrição" template="">
                <textarea name="message" style="display:none"></textarea>
               
                  <textarea id="message-template-bbcode-0" style="display:none">[b]Nick:[/b] {field0}
                  <dl></dl>
[b]Level:[/b] {field1}
<dl></dl>                 
[b]Por quais clãs já participou:[/b] {field2}
<dl></dl>                 
[b]Por quê quero entrar pro clã:[/b] {field3}</textarea>
<input type="hidden" name="mode" value="newtopic">
<input type="hidden" name="lt" value="0">
  <dd><input type="submit" name="post" class="button2" value="Enviar"></dd>
           

</form>

@Whiskey veja se resulta!

Veja se resulta:

Código:

<br /><br /><script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
               <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <script src="http://ajuda.forumeiros.com/29110.js"></script>
                <script src="http://ajuda.forumeiros.com/28074.js"></script>
                <style>
            #generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
 
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
 
#generated_form dl {
   margin-bottom: 10px;
   font-size: 1.1em;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
 
#generated_form dt {
   width: 30%;
   padding-top: 5px;
   border: none;
   float: left;
}
 
#generated_form dd {
   padding: 5px;
   padding-right: 5px;
   margin-left: 30%;
   vertical-align: middle;
}
#generated_form dl:hover dt {
   color: #666;
}
 
#generated_form input {
   font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   color: #333333;
   padding: 2px;
   vertical-align: middle;
   padding-left: 4px;
}
 
#generated_form input[disabled] {
   background-color:#ddd;
   cursor:pointer;
}
 
#generated_form select {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   font-weight: normal;
   font-style: normal;
   cursor: default;
   vertical-align: middle;
   width:auto;
   max-width:100%;/* Bug IE */
   padding: 1px;
}
 
#generated_form textarea {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   width: 300px;
   height: 100px;
   padding: 2px;
   padding-left: 4px;
   cursor: text;
}
 
#generated_form input[type=text], #generated_form input[type=fields_list] {
   width: 300px;
   cursor: text;
}
</style>
           


 <form onsubmit="submit_form();" action="/posting.forum" id="generated_form" method="post" enctype="multipart/form-data"> 

 <input type="hidden" name="form_mode" value="0"> 
  <dd><br /><span style="font-size: 18px; line-height: normal"><strong>® Formulário de Recrutamento </strong></span>
    <dl></dl>
  SEU NICK:
  <dl><input type="text" data-type="field" value="" id="field0"></dl>
    <dl></dl>
    SEU LEVEL:
  <dl><input type="number" min="0" max="99999" data-type="field" value="" step="0" id="field1"></dl>
    QUAIS CLÃ JÁ PARTICIPOU:
  <dl><input type="text" data-type="field" value="" id="field2"></dl>
    <dl></dl>
    POR QUÊ DESEJA ENTRAR PRO CLÃ:<br>
            <br>   <div class="botoes">
      <button class="button2" onclick="bbcode_tag('[b]','[/b]')" onmouseover="helpline('b')" type="button" id="addbbcode0" accesskey="b" title="Negrito"><img required="" src="http://2img.net/i/fa/wysiwyg/text_bold.png" alt="Negrito" title="Negrito"></button>&nbsp; <button class="button2" onclick="bbcode_tag('[u]','[/u]')" onmouseover="helpline('u')" type="button" id="addbbcode4" accesskey="u" title="Sublinhar"><img src="http://2img.net/i/fa/wysiwyg/text_underline.png" alt="Sublinhar" title="Sublinhar"></button>&nbsp; <button class="button2" onclick="bbcode_tag('[left]','[/left]')" onmouseover="helpline('m')" type="button" id="addbbcode52" accesskey="m" title="Esquerda"><img src="http://2img.net/i/fa/wysiwyg/text_align_left.png" alt="Esquerda" title="Esquerda"></button> <button class="button2" onclick="bbcode_tag('[center]','[/center]')" onmouseover="helpline('t')" type="button" id="addbbcode30" accesskey="t" title="Centralizar"><img src="http://2img.net/i/fa/wysiwyg/text_align_center.png" alt="Centralizar" title="Centralizar"></button>&nbsp; <button class="button2" onclick="bbcode_tag('[right]','[/right]')" onmouseover="helpline('g')" type="button" id="addbbcode32" accesskey="g" title="Direita"><img src="http://2img.net/i/fa/wysiwyg/text_align_right.png" alt="Direita" title="Direita"></button>&nbsp; <button class="button2" onclick="bbcode_tag('[list][*]','[/list]')" onmouseover="helpline('l')" type="button" id="addbbcode10" accesskey="l" title="Lista"><img src="http://2img.net/i/fa/wysiwyg/text_list_bullets.png" alt="-Lista" title="-Lista"></button>&nbsp; <button class="button2" onclick="bbcode_tag('[list=1][*]','[/list]')" onmouseover="helpline('o')" type="button" id="addbbcode12" accesskey="o" title="Lista ordenada"><img src="http://2img.net/i/fa/wysiwyg/text_list_numbers.png" alt="Lista ordenada" title="Lista ordenada"></button>&nbsp; <button class="button2" onclick="bbcode_tag('[img]','[/img]')" onmouseover="helpline('p')" type="button" id="addbbcode14" accesskey="p" title="Imagem"><img src="http://2img.net/i/fa/wysiwyg/picture.png" alt="Imagem" title="Imagem">&nbsp;</button> <button class="button2" onclick="bbcode_tag('[youtube] LINK AQUI',' [/youtube]')" onmouseover="helpline('w')" type="button" id="addbbcode18" accesskey="w" title="Video"><img src="http://2img.net/i/fa/wysiwyg/film.png" alt="Video" title="Video"></button>&nbsp; <button class="button2" onclick="bbcode_tag('[url= SEU LINK AQUI ','] TEXTO AQUI [/url]')" onmouseover="helpline('w')" type="button" id="addbbcode16" accesskey="w" title="Link"><img src="http://2img.net/i/fa/wysiwyg/link.png" alt="Link" title="Link"></button> 
   </div></br>
    <dl><textarea data-type="field" id="field3"></textarea></dl></dd>
 
                <input type="hidden" name="f" value="2">
                <input type="hidden" name="subject" value="O script não enviou o título" template="[ Recrutamento ]  {field0} ">
                <input type="hidden" name="description" value="O script não enviou a descrição" template="">
                <textarea name="message" style="display:none"></textarea>
                
                  <textarea id="message-template-bbcode-0" style="display:none">[b]Nick:[/b] {field0}
                  <dl></dl> 
[b]Level:[/b] {field1}
<dl></dl>                  
[b]Por quais clãs já participou:[/b] {field2}
<dl></dl>
[b]Por quê quero entrar pro clã:[/b] {field3}</textarea>

<input type="hidden" name="mode" value="newtopic">
<input type="hidden" name="lt" value="0">
  <dd><input type="submit" name="post" class="button2" value="Enviar"></dd>
            

</form>

Apareceu oque eu queria, porém não funciona os botões...

Olá, consegui pode fechar.