Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

[AddOn] BBCode Neon

+2
Shaman
Daemon
6 participantes

Fórum dos Fóruns :: Miscelânea :: Zona de codificação e análise

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

  • 0

[AddOn] BBCode Neon Empty [AddOn] BBCode Neon

Mensagem por Daemon 30.05.15 16:36


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.114102016
Versão: Todas as versões
Resultado da aplicação
[AddOn] BBCode Neon 1jVpCDF
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:
/*
 *  Application: BBCode Neon
 *  Date: 14/10/2016
 *  Version: 1.114102916
 *  Copyright (c) 2016 Daemon <bestskins.forumeiros.com>
 *  This work is free. You can redistribute it and/or modify it
 */
$(function() {
    if (!$.sceditor) return;

    $.sceditor.plugins.bbcode.bbcode.set('neon', {
        tags: {
            font: {
                style: null
            }
        },
        quoteType: $.sceditor.BBCodeParser.QuoteType.never,
        format: function(element, content) {
            var rgbToHex = function(rgbStr) {
                var m;
                function toHex(n) {
                    n = parseInt(n,10);
                    if(isNaN(n))
                        return "00";
                        n = Math.max(0,Math.min(n,255)).toString(16);
                        return n.length<2 ? '0'+n : n;
                }
                // rgb(n,n,n);
                if((m = rgbStr.match(/rgb\((\d+),\s*?(\d+),\s*?(\d+)\)/i)))
                    return '#' + toHex(m[1]) + toHex(m[2]-0) + toHex(m[3]-0);
                    // expand shorthand
                    if((m = rgbStr.match(/#([0-f])([0-f])([0-f])\s*?$/i)))
                        return '#' + m[1] + m[1] + m[2] + m[2] + m[3] + m[3];
                        return rgbStr;
                    };
                    var color = element.css('color');
                    if(element[0].nodeName.toLowerCase() === "font" && element.attr('color'))
                        color = element.attr('color');
                        color = rgbToHex(color);
                        return '[neon=' + color + ']' + content + '[/neon]';
        },
        html: function(element, attrs, content) {
          return '<font style="color:' + attrs.defaultattr + ';text-shadow: 0px 0px 5px ' + attrs.defaultattr + '">' + content + '</font>';
        }
    });

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

    toolbar = toolbar.replace(/quote/,'neon, quote');
 
    // Styles
    $('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: https://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:
    {
        tag: 'neon',
        close: true,
        replacement: '<font style="color: {option};text-shadow: 0px 0px 5px {option}">{content}</font>'
    }




Última edição por Daemon em 05.07.18 13:06, editado 3 vez(es)
Daemon

Daemon
Super Membro

Membro desde : 02/03/2012
Mensagens : 1132
Pontos : 1825

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo

[AddOn] BBCode Neon Empty Re: [AddOn] BBCode Neon

Mensagem por Shaman 30.05.15 16:52

Demais @Daemon parabéns!
Shaman

Shaman
Super Membro

Membro desde : 30/01/2014
Mensagens : 1787
Pontos : 2448

http://brasilplayvicio.com.br

Ir para o topo Ir para baixo

[AddOn] BBCode Neon Empty Re: [AddOn] BBCode Neon

Mensagem por Neimasinho 31.05.15 18:01

Sensacional, ganhou meu +1. Rosa
Neimasinho

Neimasinho
Super Membro

Membro desde : 10/06/2013
Mensagens : 1530
Pontos : 2165

http://dw-animes.forumeiros.com/ https://www.facebook.com/williamberg.cassimiro

Ir para o topo Ir para baixo

[AddOn] BBCode Neon Empty Re: [AddOn] BBCode Neon

Mensagem por tudithou 31.05.15 22:26

Ja tinha visto esse código na BS.

É algo espetacular.
tudithou

tudithou
Novo Membro

Membro desde : 16/05/2015
Mensagens : 11
Pontos : 16

Ir para o topo Ir para baixo

[AddOn] BBCode Neon Empty Re: [AddOn] BBCode Neon

Mensagem por Hagatsune 08.02.17 3:16

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.

[AddOn] BBCode Neon FgmMVhY

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;
}
Hagatsune

Hagatsune
**

Membro desde : 19/06/2014
Mensagens : 63
Pontos : 95

http://valkyrierpg.forumeiros.com/

Ir para o topo Ir para baixo

[AddOn] BBCode Neon Empty Re: [AddOn] BBCode Neon

Mensagem por Hagatsune 10.02.17 21:19

up
Hagatsune

Hagatsune
**

Membro desde : 19/06/2014
Mensagens : 63
Pontos : 95

http://valkyrierpg.forumeiros.com/

Ir para o topo Ir para baixo

[AddOn] BBCode Neon Empty Re: [AddOn] BBCode Neon

Mensagem por Daemon 11.02.17 1:24

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
Daemon

Daemon
Super Membro

Membro desde : 02/03/2012
Mensagens : 1132
Pontos : 1825

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo

[AddOn] BBCode Neon Empty Re: [AddOn] BBCode Neon

Mensagem por Hagatsune 12.02.17 3:05

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.
Hagatsune

Hagatsune
**

Membro desde : 19/06/2014
Mensagens : 63
Pontos : 95

http://valkyrierpg.forumeiros.com/

Ir para o topo Ir para baixo

[AddOn] BBCode Neon Empty Re: [AddOn] BBCode Neon

Mensagem por Daemon 12.02.17 14:53

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.
Daemon

Daemon
Super Membro

Membro desde : 02/03/2012
Mensagens : 1132
Pontos : 1825

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo

[AddOn] BBCode Neon Empty Re: [AddOn] BBCode Neon

Mensagem por Hagatsune 12.02.17 19:31

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

Hagatsune
**

Membro desde : 19/06/2014
Mensagens : 63
Pontos : 95

http://valkyrierpg.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

[AddOn] BBCode Neon Empty Re: [AddOn] BBCode Neon

Mensagem por Daemon 13.02.17 1:35

Olhe novamente a MP...
Daemon

Daemon
Super Membro

Membro desde : 02/03/2012
Mensagens : 1132
Pontos : 1825

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo

[AddOn] BBCode Neon Empty Re: [AddOn] BBCode Neon

Mensagem por rafah3o 15.02.17 5:32

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

rafah3o
*

Membro desde : 12/07/2013
Mensagens : 38
Pontos : 86

http://dealgames.forumeiro.com https://www.facebook.com/rafael.guedes.79274

Ir para o topo Ir para baixo

[AddOn] BBCode Neon Empty Re: [AddOn] BBCode Neon

Mensagem por Daemon 05.07.18 13:07

Código atualizado para a versão: 1.114102016 Estilo cool
Daemon

Daemon
Super Membro

Membro desde : 02/03/2012
Mensagens : 1132
Pontos : 1825

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Miscelânea :: Zona de codificação e análise

Permissões neste sub-fórum
Não podes responder a tópicos