Botões BBCODE em Hover

Detalhes da questão

Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: PunBB

Descrição

Infelizmente apagaram o tópico: https://ajuda.forumeiros.com/t108388-botoes-bbcode-em-hover#759145 Não sei o porque, então vamos lá... Criá-lo novamente.

Gostaria que meus botões BBCODE tivesse esse mesmo efeito:
https://i.imgur.com/voiiyoI.png?1

O botão teria o nome: "Administração"

Lá iria ter em hover:

Denúncia
ai ao clicar/passar mouse por cima iria aparecer desta forma:

Denúncias > UP
> FAIL
> Em curso
Dúvidas > Resolvida
> Recusada
> Em Curso
Revisões > UP
> Fail
> Em Curso

Seria possível?

Olá!

O tópico que você menciona não existe. De qualquer maneira, recomendo ler alguns tutoriais:
- https://ajuda.forumeiros.com/t104152-topic
- https://ajuda.forumeiros.com/t93902-topic

Atenciosamente,
Shek

Olá Shek, isso era o que eu precisava: https://ajuda.forumeiros.com/t93902-tutorial-adicionar-novo-botao-no-sceditor

Mas gostaria de saber, há como adicionar imagem e nome? Por exemplo:

https://i.servimg.com/u/f58/15/88/72/83/result43.jpg Aqui só tem a imagem, gostaria dessa imagem e adicionar: "Moderação"

UP

UP

UP

UP

Use este JavaScript, com investimento em todas as páginas:

Código:

/**
 * Código jQuery que permite adiconar múltiplos botões ao SCEditor;
 * Autor: Luiz~ (ajuda.forumeiros.com);
 * Licence MIT;
 * Créditos adicionais: Kyo Panda (quem me ensinou jQuery array) *-*
 **/
(function ($) {
  'use strict';
 
  var botoes = [
    {
      'name': 'Inserir aviso',
      'texto': 'TEXTO À SER INSERIDO PELO BOTÃO DE INSERIR AVISO!',
      'id': 'inserir-aviso',
      'imgUrl': 'http://i19.servimg.com/u/f19/19/06/98/92/fa-f10.png' /* [!] A imagem deve ser 16x16 (pixels) */
    }, /* [!] Lembre-se de SEMPRE colocar vírgula após um item, exceto no último! */
    {
      'name': 'Inserir emoji!',
      'texto': 'TEXTO À SER INSERIDO PELO BOTÃO DE INSERIR EMOJI',
      'id': 'inserir-emoji',
      'imgUrl': 'http://twemoji.maxcdn.com/16x16/1f600.png'
    } /* [!] Lembre-se de NÃO colocar vírgula no último! */
  ];
 
  /* [!] BEGIN Code */
  /* [!] NÃO MODIFICAR A PARTIR DAQUI */
  $(window).on('load', function() {
    var $ultimoGrupo = $('.sceditor-group').last();
    var $sceditor = $('#text_editor_textarea').sceditor('instance');
 
    $.each(botoes, function(index, botoes) {
      $('<a>', {
        id: botoes.id,
        class: botoes.id + ' sceditor-button',
        title: botoes.name,
        style: 'background-position: center!important; background-repeat: no-repeat!important; background-image: url(' + botoes.imgUrl + ')!important;',
        unselectable: 'on'
      }).on('click', function() {
        $sceditor.insertText(botoes.texto)
      }).appendTo($ultimoGrupo);
    });
 
  });
}(jQuery));

Deixei um pouco explicado para o senhor entender. Caso tenha dúvidas, por favor, diga.

Até mais.

Olá Luiz, eu consegui antes fazer esse código:

Código:

$(window).load(function() {
    var settings = {
      img : 'http://i.imgur.com/oAGWDdG.png',
      title : 'Denúncias'
    };
    if (_userdata["user_level"] == '1' || _userdata["user_level"] == "2") {
        $('.sceditor-group:last').after('<div class="sceditor-group"><a class="sceditor-button sceditor-button-message" title="'+settings["title"]+'"><div style="background:url('+settings["img"]+') no-repeat;"></div></a></div>');
        $('body').append('<div id="messageList" style="z-index:15;display:none;position:absolute;background:#fff;border:1px solid #ccc;padding:3px;"><div id="itens_fa" class="listItem" style="cursor:pointer;">Denúncia UP</div><div id="M2" class="listItem" style="cursor:pointer;">Denúncia Fail</div><div id="M3" class="listItem" style="cursor:pointer;">Denúncia Em Curso</div></div>');
     
     
      $('.sceditor-button-message').click(function() {
          var display = $('#messageList').css('display');
          if (display == 'none') {
            var Y = $(this).offset().top;
            var X = $(this).offset().left;
            $('#messageList').show().offset({top:Y + 25,left:X});
          }
          else { $('#messageList').hide(); }
      });
       
      $('#itens_fa').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=sucesso][tr][td][b]Denúncia UP[/b] <p>[b]Motivo:[/b] </p><p>[b]Punição:[/b] </p><p>[b]Achou injusto? Peça revisão nessa área: http://www.brasilplayultimate.com.br/f130-revisao-de-punicao[/b] </p>[/td][/tr][/table]',''); });
      $('#M2').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=alerta][tr][td][b]Denúncia FAIL[/b] <p>[b]Motivo:[/b] </p><p>[b]Achou injusto? Peça revisão nessa área: http://www.brasilplayultimate.com.br/f130-revisao-de-punicao[/b] </p>[/td][/tr][/table]',''); });
      $('#M3').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=aviso][tr][td][b]Denúncia Em Curso[/b] <p>[b]As denúncias serão fechadas no prazo de 24H caso o acusado responda, caso contrário, terá o fechamento no tempo de 48H.[/b] </p>[/td][/tr][/table]',''); });
      $('.listItem').click(function() { $(this).parent().hide(); });
    }
});
$(window).load(function() {
    var settings = {
      img : 'http://i.imgur.com/blJDYza.png',
      title : 'Dúvidas'
    };
    if (_userdata["user_level"] == '1' || _userdata["user_level"] == "2") {
        $('.sceditor-group:last').after('<div class="sceditor-group"><a class="sceditor-button sceditor-button-message-duvida" title="'+settings["title"]+'"><div style="background:url('+settings["img"]+') no-repeat;"></div></a></div>');
        $('body').append('<div id="messageDuvida" style="z-index:15;display:none;position:absolute;background:#fff;border:1px solid #ccc;padding:3px;"><div id="duvida_resolved" class="listduvida" style="cursor:pointer;">Dúvida Resolvida</div><div id="duvida_cursed" class="listduvida" style="cursor:pointer;">Dúvida Em Curso</div></div>');
     
     
      $('.sceditor-button-message-duvida').click(function() {
          var display = $('#messageDuvida').css('display');
          if (display == 'none') {
            var Y = $(this).offset().top;
            var X = $(this).offset().left;
            $('#messageDuvida').show().offset({top:Y + 25,left:X});
          }
          else { $('#messageDuvida').hide(); }
      });
       
      $('#duvida_resolved').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=sucesso][tr][td][b]Dúvida Resolvida[/b] <p>[b]Tópico Fechado e Marcado como Resolvido.[/b] </p>[/td][/tr][/table]',''); });
      $('#duvida_cursed').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=aviso][tr][td][b]Dúvida Em Curso[/b] <p>[b]Este tópico foi colocado Em Curso, após a dúvida ser retirada ele será marcado como resolvido.[/b] </p>[/td][/tr][/table]',''); });
      $('.listduvida').click(function() { $(this).parent().hide(); });
    }
});
$(window).load(function() {
    var settings = {
      img : 'http://i.imgur.com/pl6hukQ.png',
      title : 'Sugestões'
    };
    if (_userdata["user_level"] == '1' || _userdata["user_level"] == "1") {
        $('.sceditor-group:last').after('<div class="sceditor-group"><a class="sceditor-button sceditor-button-message-sug" title="'+settings["title"]+'"><div style="background:url('+settings["img"]+') no-repeat;"></div></a></div>');
        $('body').append('<div id="messagesug" style="z-index:15;display:none;position:absolute;background:#fff;border:1px solid #ccc;padding:3px;"><div id="sug_resolved" class="listsug" style="cursor:pointer;">Sugestão Aceita</div><div id="sug_recused" class="listsug" style="cursor:pointer;">Sugestão Recusada</div>');
     
     
      $('.sceditor-button-message-sug').click(function() {
          var display = $('#messagesug').css('display');
          if (display == 'none') {
            var Y = $(this).offset().top;
            var X = $(this).offset().left;
            $('#messagesug').show().offset({top:Y + 25,left:X});
          }
          else { $('#messagesug').hide(); }
      });
       
      $('#sug_resolved').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=sucesso][tr][td][b]Sugestão Aceita[/b] <p>[b]Tópico movido para "Sugestões Aceitas".[/b] </p>[/td][/tr][/table]',''); });
      $('#sug_recused').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=alerta][tr][td][b]Sugestão Recusada[/b] <p>[b]Sua sugestão foi recusada, tópico movido para "Sugestões Recusadas"[/b] </p>[/td][/tr][/table]',''); });
      $('.listsug').click(function() { $(this).parent().hide(); });
    }
});
$(window).load(function() {
    var settings = {
      img : 'http://i.imgur.com/kYqoBT9.png',
      title : 'Mudança de Nick'
    };
    if (_userdata["user_level"] == '1' || _userdata["user_level"] == "2") {
        $('.sceditor-group:last').after('<div class="sceditor-group"><a class="sceditor-button sceditor-button-message-nick" title="'+settings["title"]+'"><div style="background:url('+settings["img"]+') no-repeat;"></div></a></div>');
        $('body').append('<div id="messagenick" style="z-index:15;display:none;position:absolute;background:#fff;border:1px solid #ccc;padding:3px;"><div id="nick_resolved" class="listnick" style="cursor:pointer;">Mudança de Nick Resolvido</div><div id="nick_recused" class="listnick" style="cursor:pointer;">Mudança de Nick Recusada</div></div>');
     
     
      $('.sceditor-button-message-nick').click(function() {
          var display = $('#messagenick').css('display');
          if (display == 'none') {
            var Y = $(this).offset().top;
            var X = $(this).offset().left;
            $('#messagenick').show().offset({top:Y + 25,left:X});
          }
          else { $('#messagenick').hide(); }
      });
       
      $('#nick_resolved').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=sucesso][tr][td][b]Mudança de Nick Resolvida[/b] <p>[b]Tópico Marcado como resolvido e movido para "Arquivos - Mudar Nick/Senha"[/b] </p>[/td][/tr][/table]',''); });
      $('#nick_recused').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=alerta][tr][td][b]Mudança de Nick Recusada[/b]<p>[b]Motivo:[/b] </p><p>[b]Tópico Marcado como recusado e movido para "Arquivos - Mudar Nick/Senha"[/b] </p>[/td][/tr][/table]',''); });
      $('.listnick').click(function() { $(this).parent().hide(); });
    }
});
$(window).load(function() {
    var settings = {
      img : 'http://i.imgur.com/6YPjGrs.png',
      title : 'Problemas com a Conta'
    };
    if (_userdata["user_level"] == '1' || _userdata["user_level"] == "1") {
        $('.sceditor-group:last').after('<div class="sceditor-group"><a class="sceditor-button sceditor-button-message-problems" title="'+settings["title"]+'"><div style="background:url('+settings["img"]+') no-repeat;"></div></a></div>');
        $('body').append('<div id="messageproblems" style="z-index:15;display:none;position:absolute;background:#fff;border:1px solid #ccc;padding:3px;"><div id="problems_resolved" class="listproblems" style="cursor:pointer;">Problema com a Conta Resolvido</div><div id="problems_cursed" class="listproblems" style="cursor:pointer;">Problema com a Conta Em Curso</div></div>');
     
     
      $('.sceditor-button-message-problems').click(function() {
          var display = $('#messageproblems').css('display');
          if (display == 'none') {
            var Y = $(this).offset().top;
            var X = $(this).offset().left;
            $('#messageproblems').show().offset({top:Y + 25,left:X});
          }
          else { $('#messageproblems').hide(); }
      });
       
      $('#problems_resolved').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=sucesso][tr][td][b]Problema com a Conta Resolvido[/b] <p>[b]Tópico Marcado como resolvido e movido para "Arquivos - Problemas com a Conta"[/b] </p>[/td][/tr][/table]',''); });
      $('#problems_cursed').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=aviso][tr][td][b]Problema com a Conta Em Curso[/b] <p>[b]Os administradores irão te ajudar a solucionar o problema, para melhor atendimento tente suporte via TeamSpeak³.[/b] </p>[/td][/tr][/table]',''); });
      $('.listproblems').click(function() { $(this).parent().hide(); });
    }
});
$(window).load(function() {
    var settings = {
      img : 'http://i.imgur.com/fbimId0.png',
      title : 'Edição de RG'
    };
    if (_userdata["user_level"] == '1' || _userdata["user_level"] == "2") {
        $('.sceditor-group:last').after('<div class="sceditor-group"><a class="sceditor-button sceditor-button-message-edicao" title="'+settings["title"]+'"><div style="background:url('+settings["img"]+') no-repeat;"></div></a></div>');
        $('body').append('<div id="messageedicao" style="z-index:15;display:none;position:absolute;background:#fff;border:1px solid #ccc;padding:3px;"><div id="edicao_resolved" class="listedicao" style="cursor:pointer;">Edição de RG Resolvida</div><div id="edicao_recused" class="listedicao" style="cursor:pointer;">Edição de RG Recusada</div><div id="edicao_cursed" class="listedicao" style="cursor:pointer;">Edição de RG Em Curso</div></div>');
     
     
      $('.sceditor-button-message-edicao').click(function() {
          var display = $('#messageedicao').css('display');
          if (display == 'none') {
            var Y = $(this).offset().top;
            var X = $(this).offset().left;
            $('#messageedicao').show().offset({top:Y + 25,left:X});
          }
          else { $('#messageedicao').hide(); }
      });
       
      $('#edicao_resolved').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=sucesso][tr][td][b]Edição de RG Resolvida[/b] <p>[b]Tópico Marcado como resolvido e movido para "Arquivos - Edição de RG"[/b] </p>[/td][/tr][/table]',''); });
      $('#edicao_recused').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=alerta][tr][td][b]Edição de RG Recusada[/b] <p>[b]Motivo:[/b] </p><p>[b]Tópico Marcado como recusado e movido para "Arquivos - Edição de RG"[/b] </p> [/td][/tr][/table]',''); });
      $('#edicao_cursed').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=aviso][tr][td][b]Edição de RG Em Curso[/b] <p>[b]Procure um administrador no game ou aguarde na sala de suporte do TeamSpeak³.[/b] </p>[/td][/tr][/table]',''); });
      $('.listedicao').click(function() { $(this).parent().hide(); });
    }
});
$(window).load(function() {
    var settings = {
      img : 'http://i.imgur.com/8vqCYWG.png',
      title : 'Revisão'
    };
    if (_userdata["user_level"] == '1' || _userdata["user_level"] == "1") {
        $('.sceditor-group:last').after('<div class="sceditor-group"><a class="sceditor-button sceditor-button-message-revisao" title="'+settings["title"]+'"><div style="background:url('+settings["img"]+') no-repeat;"></div></a></div>');
        $('body').append('<div id="messagerevisao" style="z-index:15;display:none;position:absolute;background:#fff;border:1px solid #ccc;padding:3px;"><div id="revisao_resolved" class="listrevisao" style="cursor:pointer;">Revisão Resolvida</div><div id="revisao_recused" class="listrevisao" style="cursor:pointer;">Revisão Recusada</div><div id="revisao_cursed" class="listrevisao" style="cursor:pointer;">Revisão Em Curso</div></div>');
     
     
      $('.sceditor-button-message-revisao').click(function() {
          var display = $('#messagerevisao').css('display');
          if (display == 'none') {
            var Y = $(this).offset().top;
            var X = $(this).offset().left;
            $('#messagerevisao').show().offset({top:Y + 25,left:X});
          }
          else { $('#messagerevisao').hide(); }
      });
       
      $('#revisao_resolved').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=sucesso][tr][td][b]Revisão Resolvida[/b] <p>[b]Motivo:[/b] </p><p>[b]Punição Para o ADM:[/b] Caso não houver punição apague essa parte.</p>[/td][/tr][/table]',''); });
      $('#revisao_recused').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=alerta][tr][td][b]Revisão Recusada[/b] <p>[b]Motivo:[/b] </p>[/td][/tr][/table]',''); });
      $('#revisao_cursed').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('[table class=aviso][tr][td][b]Revisão Em Curso[/b] <p>[b]Aguardando envolvidos se pronunciarem.[/b] </p>[/td][/tr][/table]',''); });
      $('.listrevisao').click(function() { $(this).parent().hide(); });
    }
});

Mas infelizmente eu gostaria de fazer do mesmo jeito igual está aí mas aparecer um botão só assim:
Moderação e uma setinha pra baixo e quando clica aparece:
Esses botões daí só que assim:
[ICONE] Denúncias:
[ICONE] Dúvidas:
[ICONE] Sugestões:
[ICONE] Edição de RG
Etc...

Seria possível ?

UP

Oh yeah. Demorou, mas chegou:

Código:

/**
 * Código jQuery que permite adiconar múltiplos botões ao SCEditor;
 * Autores: Luiz~ e Kyo Panda (ajuda.forumeiros.com);
 * Plataforma: Forumeiros;
 * Versão: Todas;
 * Investimento: Todas as páginas;
 * Licence MIT;
 */
(function ($) {
  'use strict';
 
  var botoes = [
    {
      'somenteModVer': true,
      'name': 'Tópico Bloqueado',
      'text': 'Olá! \nO seu tópico encontra-se bloqueado. \nQueira ler nossas [i]regras[/i] para saber mais.',
      'id': 'tpc-lock',
      'imgUrl': 'http://i.imgur.com/z5lPhgz.png'
    }, {
      'somenteModVer': true,
      'name': 'Tópico Desbloqueado',
      'text': 'Olá! \nEsta é uma mensagem de status: \nSeu tópico foi desbloqueado. \nQueira ler nossas [i]regras[/i] para saber mais.',
      'id': 'tpc-unlock',
      'imgUrl': 'http://i.imgur.com/hsBvMRG.png'
    }, {
      'somenteModVer': true,
      'name': 'Mensagens de Moderação',
      'id': 'mensagens-de-moderacao',
      'imgUrl': 'http://i.imgur.com/uRAqJMk.png',
      'filhos': [
        {
          'somenteModVer': true,
          'name': 'Sucesso',
          'text': 'Olá. \n(MENSAGEM DE SUCESSO) \n(MENSAGEM DE SUCESSO) \n(MENSAGEM DE SUCESSO) \nAté mais.',
          'id': 'msm-sucesso',
          'imgUrl': 'http://i.imgur.com/XMgOqnY.png'
        }, {
          'somenteModVer': true,
          'name': 'Alerta',
          'text': 'Olá. \n(MENSAGEM DE ALERTA) \n(MENSAGEM DE ALERTA) \n(MENSAGEM DE ALERTA) \nAté mais.',
          'id': 'msm-alerta',
          'imgUrl': 'http://i.imgur.com/GhXYT2f.png'
        }, {
          'somenteModVer': true,
          'name': 'Aviso',
          'text': 'Olá. \n(MENSAGEM DE AVISO) \n(MENSAGEM DE AVISO) \n(MENSAGEM DE AVISO) \nAté mais.',
          'id': 'msm-aviso',
          'imgUrl': 'http://i.imgur.com/B7qqfBh.png'
        }
      ]
    }
  ];

  // Begin CSS:
  $(function () {
    $([
      /**
      * Você pode customizar o CSS, mas lembre-se de incluir as linhas entre aspas simples,
      * E sempre usar aspas compostas dentro de cada linha.
      * Lembre-se também de sempre incluir vírgula após cada linha. Exceto na última linha.
      */
      '<style>',
      '  #main .sceditor-toolbar,',
      '  #main .sceditor-group {',
      '    overflow: initial;',
      '  }',
      '  .sceditor-group {',
      '    position: relative;',
      '  }',
      '  .fa-dropdown {',
      '    position: absolute;',
      '    padding: 0px!important;',
      '    top: 27px;',
      '    background-color: #fff;',
      '    border: 1px #ccc solid;',
      '    display: none;',
      '  }',
      '  .fa-dropdown a {',
      '    display: block;',
      '    line-height: 1.5em;',
      '    padding: 7px 15px 7px 30px;',
      '    white-space: nowrap;',
      '    border-bottom: 1px #ccc solid;',
      '    cursor: pointer;',
      '    font-size: 12px;',
      '  }',
      '  .fa-dropdown a:last-child {',
      '    border-bottom: none;',
      '  }',
      '  .fa-dropdown-open {',
      '    display: block;',
      '  }',
      '</style>'
    ].join('\n'))
      .appendTo('head');
    });

  // Begin 'code':
  $(window).on('load', function () {
 
    // Variáveis Importantes:
    var $ultimoGrupo = $('.sceditor-group:last');
    var $sceditor = $('#text_editor_textarea').sceditor('instance');
    var bgStyles1 = 'background-position: center!important; background-repeat: no-repeat!important;';
    var bgStyles2 = 'background-position: 8px 9px!important; background-repeat: no-repeat!important;';

    $.each(botoes, function (index, botoes) { 
      if (botoes.somenteModVer  && _userdata.user_level <= 0) {
        return;
      }
        if ($(botoes.filhos).length) {
          // Caso seja um dropdown (TENHA UM FILHO):
          var $parent = $('<a>', {
              class: 'sceditor-button ' + botoes.id,
              title: 'Dropdown : ' + botoes.name,
              style: 'background-image: url(' + botoes.imgUrl + ')!important; ' + bgStyles1,
              unselectable: 'on'
            })
              .appendTo($ultimoGrupo)
                .on('click', function () {
                  $ultimoGrupo
                    .find('.fa-dropdown-' + botoes.id)
                      .css('left', $parent.position().left + 'px')
                        .toggleClass('fa-dropdown-open');
                });
               
          var $dropdown = $('<div>', {
            class: 'sceditor-dropdown fa-dropdown fa-dropdown-' + botoes.id
            })       
              .appendTo($ultimoGrupo);

          // Dropdown children:
          $.each(botoes.filhos, function (index, filhos) {
            $('<a>', {
              html: filhos.name,
              class: filhos.id + 'fa-dropdown-item',
              style: 'background-image: url(' + filhos.imgUrl + ')!important; ' + bgStyles2,
            })
              .appendTo($dropdown)
                .on('click', function () {
                  $sceditor.insertText(filhos.text);
                  $('.fa-dropdown')
                    .toggleClass('fa-dropdown-open');
                });
          });
         
          return;
         
        }
     
        // Caso não seja um dropdown (NÃO TENHA UM FILHO):
        $('<a>', {
          class: botoes.id + ' sceditor-button',
          title: botoes.name,
          style: 'background-image: url(' + botoes.imgUrl + ')!important; ' + bgStyles1,
          unselectable: 'on'
        })
          .appendTo($ultimoGrupo)
            .on('click', function () {
              $sceditor.insertText(botoes.text);
            });

    });
   
  });
}(jQuery));

Leia as anotações no código para entender como funciona.
Até mais.

Perfeito @Kyo Panda, tudo que precisava, qualquer cosia se eu precisar de ajuda para produzi-lo entro em contato.
Atenciosamente

Perfeito @Kyo Panda

Sou o Luiz. :c

---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".