Compartilhe
Ir em baixo
avatar
Administrador
Mensagens : 441
Pontos : 12411
Reputação : 120
Ver perfil do usuáriohttp://beststyle.forumeiros.com

Botão de Mensagens no BBcode

em 20.12.15 16:36
Informações:
Autor
: Daemon
Funcionalidade: Todas as versões




Bom, eu decidi postar a versão do Daemon, mesmo eu tendo criado algo parecido, o dele é melhor pois não fica só na caixa de resposta, ele fica fixo em todas as partes, mas enfim, vamos lá!

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 codigo:

Código:
$(function() {
if (!$.sceditor) return;

var add_BBCode = [ 'sucesso', 'info', 'aviso', 'alerta' ]; // Insira e remova tags separando-as por aspas e vírgulas

$.sceditor.command.set("tag", {
  _dropDown: function(editor,caller,handleIdFunc) {
      var content = $('<div><label for="taglabel">' + editor._("Tag") + '</label><select id="selectList"></select></div><div><label for="titlelabel">' + editor._("Title (optional)") + '</label><input type="text" id="titlelabel" value="" /></div><div><input type="button" class="button" value="' + editor._("Inserir") + '" /></div>');
      $.each(add_BBCode, function(val, text) {
            content.find('#selectList').append( $('<option></option>').val(text).html(text) );
      });
      content.find('.button').click(function(e) {
          var val = content.find("#titlelabel").val();
          handleIdFunc(val);
          editor.closeDropDown(true);
          e.preventDefault();
      });
      editor.createDropDown(caller,"insertTag",content);
  },
  // SOURCE MODE
  exec: function(caller) {
      var editor = this;
      $.sceditor.command.get('tag')._dropDown(editor,caller,function(title) {
        var name = $("#selectList").val();
        var before = '[' + name + ']',
        end = '[/' + name + ']';
        if(title !== '') {
            before = '[' + name + '="' + title + '"]';
        }
        editor.wysiwygEditorInsertHtml(before,end);
      });
  },
  // WYSIWYG MODE
  txtExec: function(caller) {
      var editor = this;
      $.sceditor.command.get('tag')._dropDown(editor,caller,function(title) {
        var name = $("#selectList").val();
        var before = '[' + name + ']',
        end = '[/' + name + ']';
        if(title !== '') {
            before = '[' + name + '="' + title + '"]';
        }
        editor.insertText(before,end);
      });
  },
  tooltip: "Insira uma Tag";
});

toolbar = toolbar.replace(/quote/,'tag,quote');
  $('head').append(
  '<style type="text/css">' +
  '.sceditor-button-tag div {' +
  '  background: url("https://cdn1.iconfinder.com/data/icons/hawcons/32/698382-icon-45-note-list-16.png") !important;' +
  '}' +
  ' .sceditor-tag {' +
  '  width:auto;' +
  '  height:auto;' +
  '  overflow-y:auto;' +
  '}' +
  '.sceditor-insertTag select {' +
  '  margin: 0 0 .75em;' +
  '}' +
  '</style>'
  );
});

Feito isto, acesse:
Painel de controle Visualização Imagens e Cores Cores Folha de Estilo
E adicione esse codigo CSS em sua folha de estilo:

Código:
.alert, .success, .information, .warn {
  padding: 15px;
  width: 85%;
  border: 1px solid;
  margin: 3px 0;
  -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
  -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
  box-shadow: 1px 1px 2px rgba(0,0,0,.4);
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  font: 13px "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.alert > p, .success > p, .information > p, .warn > p {
  font-weight: bold;
  font-size: 14px;
}
.alert {
  background: #FAFFB2;
  border-color: #DBE08A;
  color: #AF8640;
}
.warn {
  background-color: #F2DEDE;
  border-color: #D3949E;
  color: #A94442;
}
.success {
  background-color: #DFF0D8;
  border-color: #A5D280;
  color: #3C763D;
}
.information {
  background-color: #ADDBF2;
  border-color: #5AB7CA;
  color: #31708F;
}

Resultado será este:





OBS: Talvez esteja pensando, poxa mais o tutorial era pra somente por os 4 itens num só bbcode? infelizmente é... mas, tem o meu tutorial caso queiram ver, que tem o mesmo codigo porém só funcional na caixa de resposta com cada função em um bbcode, veja: http://beststyle.forumeiros.com/t13-
avatar
Administrador
Mensagens : 441
Pontos : 12411
Reputação : 120
Ver perfil do usuáriohttp://beststyle.forumeiros.com

Re: Botão de Mensagens no BBcode

em 20.12.15 16:40
Tutorial Aceito
Voltar ao Topo
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum