[AddOn] BBCode Neon

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

  • 0

[AddOn] BBCode Neon

Mensagem por Daemon em 30/05/15, 12:36 pm


BBCode Neon
Este código irá criar um botão no editor, com uma paleta de cores que servirá para o bbcode neon.
Características e aplicação
Criador: @Daemon
Versão: 1.0
Versão: Todas as versões
Resultado da aplicação
Local de instalação
A instalação é única, e pode ser feita apenas criando um novo javascript. Para isso, acesse Painel de Controle ->> Módulos >> HTML e Javascript >> Gestão dos códigos Javascript >> Criar um novo javascript >> Investimento >> Em todas as páginas.
Código:
$(function() {
  if (!$.sceditor) return;

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

  _dropDown : function(editor,caller,callback) {
    var i, x, neon, neons, genneon = {
       r: 255, g: 255, b: 255
    },
    content = $("<div />"),
    neonColumns = editor.opts.neons?editor.opts.neons.split("|"):new Array(6),
    html = [],
    cmd = $.sceditor.command.get('neon');
    if(!cmd._htmlCache) {
       for(i = 0; i < neonColumns.length; ++i) {
            neons = neonColumns[i]?neonColumns[i].split(","):new Array(37);
            html.push('<div class="sceditor-color-column">');
             for(x = 1; x < neons.length; ++x) {
                  neon = neons[x]||"#"+genneon.r.toString(16)+genneon.g.toString(16)+genneon.b.toString(16);
                  html.push('<a href="#" class="sceditor-neon-option" style="background-color: ' + neon + '" data-neon="' + neon + '" title="' + neon + '"></a>');
                  if(x%6 === 0) {
                     genneon.g -= 51;
                     genneon.b = 255;
                     if(genneon.g < 51) {
                        genneon.g = "00";
                     }
                  } else genneon.b -= 51;
                  if(genneon.b < 51) {
                     genneon.b = "00";
                  }
             }
             html.push('</div>');
             if(i%1 === 0) {
                genneon.r -= 51;
                genneon.g = 255;
                genneon.b = 255;
                if(genneon.r < 51) {
                   genneon.r = "00";
                }
             } else {
                   genneon.g = 255;
                   genneon.b = 255;
             }
       }
       cmd._htmlCache = html.join('');
    }
    content.append(cmd._htmlCache).find('a').click(function(e) {
         callback($(this).attr('data-neon'));
         editor.closeDropDown(true);
         e.preventDefault();
    });
    editor.createDropDown(caller, "neon-picker", content);
   },
   // WYSIWYG MODE
   txtExec : function(caller) {
   var editor = this;
       $.sceditor.command.get('neon')._dropDown(editor, caller, function(neon) {
         editor.insertText("[neon="+neon+"]","[/neon]");
   });
   },
   // SOURCE MODE
   exec : function(caller) {
   var editor = this;
       $.sceditor.command.get('neon')._dropDown(editor, caller, function(neon) {
         editor.insertText("[neon="+neon+"]","[/neon]");
       });
   }, tooltip: "Neon"});
  
  toolbar = toolbar.replace(/quote/,'neon,quote');

  $('head').append(
  '<style type="text/css">' +
  '.sceditor-button-neon div {' +
  '  background:url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/color2_16x16.gif) !important}' +
  '  .sceditor-neon {' +
  '  width:auto;' +
  '  height:auto;' +
  '  overflow-y:auto;' +
  '}' +
  '.sceditor-neon-picker {' +
  '  padding: 0 !important;' +
  '}' +
  '.sceditor-neon-option {' +
  'border: 1px solid #fff;' +
  'display: block;' +
  'height: 10px;' +
  'overflow: hidden;' +
  'width: 10px;' +
  '}' +
  '</style>'
  );
});

Importante:

  1. Você deverá aplicar o código do seguinte tutorial: http://ajuda.forumeiros.com/t99723-plugin-criar-tags-bbcode
  2. Após aplicá-lo, adicione o seguinte bbcode no código do tutorial do link acima:
    Código:
    neon: {
          replacement: '<font style="color: {ATTR};text-shadow: 0px 0px 5px {ATTR};">{CONTENT}</font>'
    }


avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1688

Ver perfil do usuário http://bestskins.forumeiros.com/

Re: [AddOn] BBCode Neon

Mensagem por Shaman em 30/05/15, 12:52 pm

Demais @Daemon parabéns!
avatar

Shaman
Membro do Fórum

Masculino
Inscrito dia : 30/01/2014
Mensagens : 1784
Pontos Ativos : 2448

Ver perfil do usuário http://www.nexplorer.tk https://www.facebook.com/pages/Nexplorer/857666487628799?fref=ts

Re: [AddOn] BBCode Neon

Mensagem por Neimasinho em 31/05/15, 02:01 pm

Sensacional, ganhou meu +1. Rosa
avatar

Neimasinho
Membro do Fórum

Masculino
Inscrito dia : 10/06/2013
Mensagens : 1528
Pontos Ativos : 2163

Ver perfil do usuário http://dw-animes.forumeiros.com/ https://www.facebook.com/williamberg.cassimiro

Re: [AddOn] BBCode Neon

Mensagem por tudithou em 31/05/15, 06:26 pm

Ja tinha visto esse código na BS.

É algo espetacular.
avatar

tudithou
Nível 2

Masculino
Inscrito dia : 16/05/2015
Mensagens : 11
Pontos Ativos : 16

Ver perfil do usuário

Re: [AddOn] BBCode Neon

Mensagem por Hagatsune em 08/02/17, 01:16 am

Não consigo fazer funcionar de nenhum jeito... Instalei somente o primeiro código, criou somente o botão, mas não funciona quando posta. Dai fiz o passo a passo do "importante", instalei ambos os códigos que tinha no link e agora ele substitui o [neon] por $3 com o efeito, mas a escrita que está dentro do code neon /neon continua sem efeito.



Java neon
Código:
$(function() {
  if (!$.sceditor) return;
 
  $.sceditor.command.set('neon', {
 
  _dropDown : function(editor,caller,callback) {
    var i, x, neon, neons, genneon = {
      r: 255, g: 255, b: 255
    },
    content = $("<div />"),
    neonColumns = editor.opts.neons?editor.opts.neons.split("|"):new Array(6),
    html = [],
    cmd = $.sceditor.command.get('neon');
    if(!cmd._htmlCache) {
      for(i = 0; i < neonColumns.length; ++i) {
            neons = neonColumns[i]?neonColumns[i].split(","):new Array(37);
            html.push('<div class="sceditor-color-column">');
            for(x = 1; x < neons.length; ++x) {
                  neon = neons[x]||"#"+genneon.r.toString(16)+genneon.g.toString(16)+genneon.b.toString(16);
                  html.push('<a href="#" class="sceditor-neon-option" style="background-color: ' + neon + '" data-neon="' + neon + '" title="' + neon + '"></a>');
                  if(x%6 === 0) {
                    genneon.g -= 51;
                    genneon.b = 255;
                    if(genneon.g < 51) {
                        genneon.g = "00";
                    }
                  } else genneon.b -= 51;
                  if(genneon.b < 51) {
                    genneon.b = "00";
                  }
            }
            html.push('</div>');
            if(i%1 === 0) {
                genneon.r -= 51;
                genneon.g = 255;
                genneon.b = 255;
                if(genneon.r < 51) {
                  genneon.r = "00";
                }
            } else {
                  genneon.g = 255;
                  genneon.b = 255;
            }
      }
      cmd._htmlCache = html.join('');
    }
    content.append(cmd._htmlCache).find('a').click(function(e) {
        callback($(this).attr('data-neon'));
        editor.closeDropDown(true);
        e.preventDefault();
    });
    editor.createDropDown(caller, "neon-picker", content);
  },
  // WYSIWYG MODE
  txtExec : function(caller) {
  var editor = this;
      $.sceditor.command.get('neon')._dropDown(editor, caller, function(neon) {
        editor.insertText("[neon="+neon+"]","[/neon]");
  });
  },
  // SOURCE MODE
  exec : function(caller) {
  var editor = this;
      $.sceditor.command.get('neon')._dropDown(editor, caller, function(neon) {
        editor.insertText("[neon="+neon+"]","[/neon]");
      });
  }, tooltip: "Neon"});
 
  toolbar = toolbar.replace(/quote/,'neon,quote');
 
  $('head').append(
  '<style type="text/css">' +
  '.sceditor-button-neon div {' +
  '  background:url(https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/color2_16x16.gif) !important}' +
  '  .sceditor-neon {' +
  '  width:auto;' +
  '  height:auto;' +
  '  overflow-y:auto;' +
  '}' +
  '.sceditor-neon-picker {' +
  '  padding: 0 !important;' +
  '}' +
  '.sceditor-neon-option {' +
  'border: 1px solid #fff;' +
  'display: block;' +
  'height: 10px;' +
  'overflow: hidden;' +
  'width: 10px;' +
  '}' +
  '</style>'
  );
});

Java plugin bbcode
Código:
/***
 * Aplicação: Criar tags BBCode
 * Descrição: Esta aplicação serve para a criação de novas tags bbcode.
 * Versão: 2.0
 * Feito por Daemon e atualizado em: 26/09/2016
 * 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
 
        sucesso: {
            close: true,
            replacement: '<div class="success"><p>{ATTR}</p>{CONTENT}</div>'
        },
     
        neon: {
            replacement: '<font style="color: {ATTR};text-shadow: 0px 0px 5px {ATTR};">{CONTENT}</font>'
        },
 
        aviso: {
            close: true,
            replacement: '<div class="warn"><p>{ATTR}</p>{CONTENT}</div>'
        },
 
        info: {
            close: true,
            replacement: '<div class="information"><p>{ATTR}</p>{CONTENT}</div>'
        },
 
        alerta: {
            close: true,
            replacement: '<div class="alert"><p>{ATTR}</p>{CONTENT}</div>'
        },
 
        visitante: {
            close: true,
            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;
                }
            }
        }
 
        // Nota: Não adicione vírgula ao final da última entrada
 
    };
 
    var getPost = $(".postbody , .blog_message"); //pega as postagens
    for (var i = 0, e;
        (e = getPost[i++]);) {
        var entry = $(e);
        $.each(bbCodes, function(tag, value) {
 
            var re = value.close ? new RegExp("\\[" + tag + "(?:=(\"|'?)([^\\]]+)\\1)?\\]([\\s\\S]*?)\\[/" + tag + "]", "gi") : new RegExp("\\[" + tag + "(?:=(\"|'?)([^\\]]+)\\1)?\\]", "gi");
            var match = entry.html().match(re);
 
            if (match) {
                for (var tag in match) {
                    var content = match[tag];
                    var b = "$3";
                    if (value.replace) {
                        var as_string = value.replace.toString();
                        var as_func = eval('(' + as_string + ')');
                        if (as_func(content)) b = as_func(content);
                    }
                    var replacement = value.replacement
                        .replace(/{ATTR}/g, "$2").replace(/{CONTENT}/g, b);
                    var c = content.replace(re, replacement);
                    entry.html(entry.html().replace(content, c));
                }
            }
        });
    }
});

CSS Plugin bbcode
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;
}
avatar

Hagatsune
Nível 5

Feminino
Inscrito dia : 19/06/2014
Mensagens : 51
Pontos Ativos : 77

Ver perfil do usuário http://valkyrierpg.forumeiros.com/

Re: [AddOn] BBCode Neon

Mensagem por Hagatsune em 10/02/17, 07:19 pm

up
avatar

Hagatsune
Nível 5

Feminino
Inscrito dia : 19/06/2014
Mensagens : 51
Pontos Ativos : 77

Ver perfil do usuário http://valkyrierpg.forumeiros.com/

Re: [AddOn] BBCode Neon

Mensagem por Daemon em 10/02/17, 11:24 pm

Este problema acontece pq na última atualização que eu fiz no código de BBCodes é possível adicionar tags fechadas ou não... por exemplo:
Código:
[tag="123]teste[/tag]
close: true
Tag fechada

Código:
[tag="123"]
close: false
Tag aberta

Pra corrigir o "bug", apenas adicione o bbcode neon da seguinte maneira:
Código:
neon: {
    close: true,
    replacement: '<font style="color: {ATTR};text-shadow: 0px 0px 5px {ATTR};">{CONTENT}</font>'
}
Rosa Estilo cool Feliz
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1688

Ver perfil do usuário http://bestskins.forumeiros.com/

Re: [AddOn] BBCode Neon

Mensagem por Hagatsune em 12/02/17, 01:05 am

Hum... Eu não entendi bem, porque quando instalo, o botão q fica no bbcode some. Mesmo com botão aparecendo não funciona... Eu instalei esse código no java das tabs...

Código:
/***
 * Aplicação: Criar tags BBCode
 * Descrição: Esta aplicação serve para a criação de novas tags bbcode.
 * Versão: 2.0
 * Feito por Daemon e atualizado em: 26/09/2016
 * 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
 
        sucesso: {
            close: true,
            replacement: '<div class="success"><p>{ATTR}</p>{CONTENT}</div>'
        },
 
        aviso: {
            close: true,
            replacement: '<div class="warn"><p>{ATTR}</p>{CONTENT}</div>'
        },
 
        info: {
            close: true,
            replacement: '<div class="information"><p>{ATTR}</p>{CONTENT}</div>'
        },
 
        alerta: {
            close: true,
            replacement: '<div class="alert"><p>{ATTR}</p>{CONTENT}</div>'
        },
 
        visitante: {
            close: true,
            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;
                },
                 
        neon: {
            close: true,
            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 getPost = $(".postbody , .blog_message"); //pega as postagens
    for (var i = 0, e;
        (e = getPost[i++]);) {
        var entry = $(e);
        $.each(bbCodes, function(tag, value) {
 
            var re = value.close ? new RegExp("\\[" + tag + "(?:=("|'?)([^\\]]+)\\1)?\\]([\\s\\S]*?)\\[/" + tag + "]", "gi") : new RegExp("\\[" + tag + "(?:=("|'?)([^\\]]+)\\1)?\\]", "gi");
            var match = entry.html().match(re);
 
            if (match) {
                for (var tag in match) {
                    var content = match[tag];
                    var b = "$3";
                    if (value.replace) {
                        var as_string = value.replace.toString();
                        var as_func = eval('(' + as_string + ')');
                        if (as_func(content)) b = as_func(content);
                    }
                    var replacement = value.replacement
                        .replace(/{ATTR}/g, "$2").replace(/{CONTENT}/g, b);
                    var c = content.replace(re, replacement);
                    entry.html(entry.html().replace(content, c));
                }
            }
        });
    }
});

Não sei se está certo... Coloquei esse novo código que me mandou. Quando não tem o código do java da tag, aparece o botão bbcode, ele lança o código de cor, mas quando eu posto, ele vira $3 com o efeito, e a escrita sem efeito.
avatar

Hagatsune
Nível 5

Feminino
Inscrito dia : 19/06/2014
Mensagens : 51
Pontos Ativos : 77

Ver perfil do usuário http://valkyrierpg.forumeiros.com/

Re: [AddOn] BBCode Neon

Mensagem por Daemon em 12/02/17, 12:53 pm

Para este tópico aqui não se tornar um "suporte", irei te enviar por MP o código.

PS: A forma que você adicionou não está correta.
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1688

Ver perfil do usuário http://bestskins.forumeiros.com/

Re: [AddOn] BBCode Neon

Mensagem por Hagatsune em 12/02/17, 05:31 pm

Continua sem aparecer o botão e colocando o código [neon=cor][/neon] não funciona ainda.
avatar

Hagatsune
Nível 5

Feminino
Inscrito dia : 19/06/2014
Mensagens : 51
Pontos Ativos : 77

Ver perfil do usuário http://valkyrierpg.forumeiros.com/
  • 0

Re: [AddOn] BBCode Neon

Mensagem por Daemon em 12/02/17, 11:35 pm

Olhe novamente a MP...
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1688

Ver perfil do usuário http://bestskins.forumeiros.com/

Re: [AddOn] BBCode Neon

Mensagem por rafah3o em 15/02/17, 03:32 am

queria utilizar isso nos nick das pessoas..seria possível ?
avatar

rafah3o
Nível 5

Masculino
Inscrito dia : 12/07/2013
Mensagens : 38
Pontos Ativos : 86

Ver perfil do usuário http://dealgames.forumeiro.com https://www.facebook.com/rafael.guedes.79274

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum