[Tutorial] Bbcode para marcar o usuario

Informações:
Autor: Ange Tuteur
Funcionalidade: Todas as versões

---

Acesse:

Painel de Controle ☛ Modulos ☛ Html e Javascript ☛ Gestão dos codigos Javascript

E Crie um novo Javascript com investimento em todas as paginas com esse código:

Código:

$(function(){
  if (!$.sceditor || /\/privmsg/.test(window.location.pathname)) return;
  var storage = window.localStorage, s = document.createElement('SELECT'), amis;
 
  if (storage && storage.faAmis && storage.faAmisExp > +new Date - 29*59*1000 && storage.faAmisUser == _userdata.username) s.innerHTML = storage.faAmis;
  else {
    $.get('/privmsg?mode=post', function(d) {
      amis = $('select[name="userfriend"]', d)[0] || 0;
 
      if (amis) {
        amis.firstChild.innerHTML = 'Select a friend';
        s.innerHTML = amis.innerHTML;
      }
 
      if (storage) {
        storage.faAmis = amis ? amis.innerHTML : 0;
        storage.faAmisUser = _userdata.username;
        storage.faAmisExp = +new Date;
      }
    });
  }
 
 
  $.sceditor.command.set('mention', {
    dropDown : function(editor, caller, callback) {
      var a = document.createElement('DIV'), b = document.createElement('INPUT'), c = document.createElement('INPUT');
      b.type = 'button';
      b.value = 'Insert';
      b.className = 'button';
  
      c.type = 'text';
      c.id = 'fa-mention';
  
      a.innerHTML = '<div><label for="fa-mention">Username :</label></div>' + ( s.innerHTML ? '<div><label>Mention a friend :</label></div>' : '' ) + '<div></div>';
      a.firstChild.appendChild(c);
      a.lastChild.appendChild(b);
  
      if (s.innerHTML != 0) {
        s.value = '';
        a.getElementsByTagName('DIV')[1].appendChild(s);
        s.onchange = function() {
          c.value = s.value;
        };
      }
  
      b.onclick = function() {
        c.value && callback(c.value);
        editor.closeDropDown(true);
      };
 
      editor.createDropDown(caller, 'insertmention', a);
    },
 
    exec : function(c) { mention(c, this) },
    txtExec : function(c) { mention(c, this) },
 
    tooltip : 'Mention a member'
  });
 
  toolbar = toolbar.replace(/quote,/,'mention,quote,');
 
  function mention(c, e) {
    $.sceditor.command.get('mention').dropDown(e, c, function(pseudo) {
      e.insertText('@"' + pseudo + '" ');
    });
  }
});

Depois disto, acesse:

Painel de Controle ☛ Visualização ☛ Imagens e Cores ☛ Cores ☛ Folha de Estilo CSS

E Adicione esse código:

Código:

/* button image */
.sceditor-button-mention div { background-image:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }
 
/* drop down input */
#fa-mention {
  background:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}

Resultado: