Criar tags BBcode

Detalhes da questão

Endereço do fórum: http://soulfulbrmusic.forumais.com/forum
Versão do fórum: PunBB

Descrição

Bom dia pessoal, gostaria de saber como adicionar tags com o plugin que o Daemon desenvolveu.
Mas precisamente adicionar essas imagens,

https://i.servimg.com/u/f18/18/89/20/58/play-s12.png
https://i.servimg.com/u/f18/18/89/20/58/app-st10.png

Podem ver neste tópico http://soulfulbrmusic.forumais.com/t72-

Eis o código que estou usando

Código:

/***
     * Aplicação: Criar tags BBCode
     * Descrição: Esta aplicação serve para a criação de novas tags bbcode.
     * Versão: 1.9
     * Feito por Daemon e atualizado em: 13/09/2015
     * Veja mais em: http://ajuda.forumeiros.com
     ***/
    jQuery(document).ready(function($) {

    var bbCodes = {
    
    // Nota: Adicione uma vírgula ao final de cada nova entrada;
    // O "{ATTR}" é correspondente ao 'título' da tag, e o "{CONTENT}" é correspondente ao texto entre as tags

 ytscreen: {
              replacement: '<a href="http://youtube.com/watch?v={CONTENT}"><img src="http://i.ytimg.com/vi/{CONTENT}/mqdefault.jpg" width="320px" height="180px" alt="Clique para Assistir" title="Clique para Assistir"></a><br>Clique na Imagem Para Assistir'
    },
    
    visitante: {
              replacement: '<div class="guest">{CONTENT}</div>',
              replace: function(content) {
                           if(_userdata.session_logged_in < 1) {
                              return 'Você precisa estar conectado para visualizar este conteúdo';
                              return content;
                           }
                       }
    },

    bspoiler: {
    replacement : '<div style="padding: 3px; text-align:center; border-bottom: black 1px solid"><em>{ATTR}: </em><input type="button" onclick="togglebspoiler(this)" value="Mostrar"/></div><div class="bspoiler" style="display:none">{CONTENT}</div>'
    },
    
    neon: {
          replacement: '<font style="color: {ATTR};text-shadow: 0px 0px 5px {ATTR};">{CONTENT}</font>'
    }
    

    // Nota: Não adicione vírgula ao final da última entrada

    };

    var p = $(".postbody , .blog_message"); //pega as postagens

    for(var i = 0, e; (e = p[ i++ ]); ) {
        var entry = $(e);
        $.each(bbCodes, function(tag, value) {
          var re = new RegExp("\\["+tag+"(?:=("|'?)([^\\]]+)\\1)?\\]([\\s\\S]*?)\\[/"+tag+"]", "gi"), match = entry.text().match(re);
          if(match) {
              for(var tag in match) {
                  var content = match[tag], b = "$3";
                  if(value.replace && value.replace(content)) {
                    b = value.replace(content);
                  }
                  replacement = value.replacement.replace(/{ATTR}/g,"$2").replace(/{CONTENT}/g,b);
                  var c = content.replace(re, replacement);
                  entry.html(entry.html().replace(content, c));
              }
          }
        });
    }
    });

    function togglebspoiler(el) {
       $(el.parentNode.nextSibling).toggle();
       el.value = (el.value === 'Mostrar') ? 'Ocultar' : 'Mostrar';
    }

Código:

$(function() {
      if (!$.sceditor) return;

      $.sceditor.command.set('cmd', {

      dropDown : function(editor, caller, callback) {

        // Adicione abaixo as tags que farão parte da sua lista de comandos, separando-as por vírgula

        var items = ['ytscreen', 'visitante','bspoiler'];

        var content = $(
        '<div>' +
        '  <div>' +
        '    <label>Selecione uma tag</label>' +
        '    <select></select>' +
        '  </div>' +
        '  <div>' +
        '    <label>Título (opcional)</label>' +
        '    <input type="text" id="cmdValue" value="" />' +
        '  </div>' +
        '  <div>' +
        '    <input type="button" class="button" value="Inserir">' +
        '  </div>' +
        '</div>'
        );
                $.each(items, function(key, val) {
                      content.find('select').append('<option class="sceditor-cmd-option" value="' + val + '">' + val + '</option>');
                });
                content.find('.button').click(function(e) {
                    callback(content.find('select').val());
                    editor.closeDropDown(true);
                });
                editor.createDropDown(caller, "cmd", content);
      },
      // WYSIWYG MODE
      exec : function(caller) {
      var editor = this;
          $.sceditor.command.get('cmd').dropDown(editor, caller, function(cmd) {
            var before = '[' + cmd + ']', end = '[/' + cmd + ']', title = $('#cmdValue').val();
            if(title !== '') {
                before = '[' + cmd + '="' + title + '"]';
                editor.wysiwygEditorInsertHtml(before, end);
            }
          });
      },
      // SOURCE MODE
      txtExec : function(caller) {
      var editor = this;
          $.sceditor.command.get('cmd').dropDown(editor, caller, function(cmd) {
            var title = $('#cmdValue').val();
            if(title) {
                editor.insertText('[' + cmd + '="' + title + '"]','[/' + cmd + ']');
            } else {
                editor.insertText('[' + cmd + ']','[/' + cmd + ']');
            }
          });
      }, tooltip: "Lista de comandos"});
    
      toolbar = toolbar.replace(/quote/,'cmd,quote');

      $('head').append(
      '<style type="text/css">' +
      '.sceditor-button-cmd div {' +
      '  background:url(https://cdn2.iconfinder.com/data/icons/snipicons/500/th-list-16.png) !important}' +
      '  .sceditor-cmd {' +
      '  width:auto;' +
      '  height:auto;' +
      '  overflow-y:auto;' +
      '}' +
      '.sceditor-cmd select {' +
      '  margin: 0 0 .75em;' +
      '}' +
      '</style>'
      );
    });

Olá,
Seria algo assim ?
Uma Tag com esse Efeito ?

Olá Gustavo na verdade eu queria adicionar uma bbcode que eu pudesse inserir as imagem que eu postei com os links
Pois que uso o código

Código:

[url=Endereço de ligação][img]Endereço da imagem[/img][/url]

, um exemplo é a tag do youtube

Amigo, não entendi sinceramente... Você deseja o que? uma nova bbcode que tenha função de anexar as imagens que o "primeiro post" fez , bastando apenas você colocar a url do endereço, seria isto?

Realmente não entendi :/, aguardo sua resposta, logo respondendo e retirando sua duvida.

Tiupkit escreveu:Você deseja o que? uma nova bbcode que tenha função de anexar as imagens que o "primeiro post" fez , bastando apenas você colocar a url do endereço, seria isto?

É exatamente isso, por exemplo, para a appstore seria

Código:

[appstore]enderecodolink[/appstore]

e o mesmo para a google play music.

Espero que consiga entender agora

Desde já agradeço.

UP

---

Editado
Boa Noite consegui criar as tags depois de muito sofrimento

Código:

appstore: {
replacement: '<a href="https://itunes.apple.com/br/album/{CONTENT}"><img src="http://i18.servimg.com/u/f18/18/89/20/58/app-st10.png"</a>'
},   

gplay: {
replacement: '<a href="https://play.google.com/store/music/album/{CONTENT}"><img src="http://i18.servimg.com/u/f18/18/89/20/58/play-s12.png"</a>'
}

agora gostaria que quando clicar nos botões, abrir numa nova aba.

UP!!

Código:

appstore: {
replacement: '<a href="https://itunes.apple.com/br/album/{CONTENT}"><img src="http://i18.servimg.com/u/f18/18/89/20/58/app-st10.png"</a>'
}, 

gplay: {
replacement: '<a href="https://play.google.com/store/music/album/{CONTENT}"><img src="http://i18.servimg.com/u/f18/18/89/20/58/play-s12.png"</a>'
}

Olá,voce quer que quando postar a TAG dar o efeito de um link para a pessoa apertar e ir para o ''TAL'' Lugar que foi redirecionado é isso ?

Sim Gustavo, nesse tópico http://soulfulbrmusic.forumais.com/t75-testando-as-bbcodes

Quando você clicar vai para o link, mas eu quero que se abra em uma nova aba, ao invés de sair do fórum.

olá!

Leia este tutorial: https://ajuda.forumeiros.com/t93902-tutorial-adicionar-novo-botao-no-sceditor

Atenciosamente,
Shek

Boa tarde!

Em seu código, na última linha literalmente, deve ter isso:

Código:

});

Dê um espaço e antes dela cole:

Código:

$('.post-entry a').attr('target', '_blank');

Exemplo:

Código:

$('.post-entry a').attr('target', '_blank');

});

Espero que solucione,
MateusAnjos.

Mateus deu certo, você é um gênio muito obrigada

Agradeço também o Gustavo e o Tiupkit que tentaram ajudar

Abraços.
Resolvido.