[Plugin] Criar tags bbcode

+16
pedxz
Mirotic
STBWº
Rick22
Karadruz DL
Luiz
TheDarkPlay
cocas20
Kallahari
Harleen
JrMAFiA
Lima 3005
Rayner
JScript
Shek
Daemon
20 participantes

Página 2 de 2 Anterior  1, 2

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

  • 0

[Plugin] Criar tags bbcode - Página 2 Empty [Plugin] Criar tags bbcode

Mensagem por Daemon 09.05.15 19:32

Relembrando a primeira mensagem :


Criar tags BBCode
Este plugin dá a liberdade de criar tags bbcode com suas respectivas substituições em HTML.
Características e aplicação
Criador: @Daemon
Versão: 1.321052018
Versão: Todas as versões
Resultado da aplicação
[Plugin] Criar tags bbcode - Página 2 Sem_ty13
Local de instalação
A instalação é única, e pode ser feita apenas criando um novo javascript. Para isso, acesse:
Painel de Controle Seta Módulos Seta HTML e Javascript Seta Gestão dos códigos Javascript Seta Criar um novo javascript Seta Investimento Seta Em todas as páginas.
Acesse o seguinte link para visualizar o código: https://pastebin.com/UXMuRPjJ
Este código é para punbb, se você não usa punbb, você precisa substituir na seguinte linha:
var postContent = $(".entry-content, .blog_message");
Altere para a versão do seu fórum:
Invision: var postContent = $(".post-entry, .blog_message");
PhpBB3: var postContent = $(".content, .blog_message");
PhpBB2: var postContent = $(".postbody, .blog_message");

Após feito isto, vá até:
Painel de controle Seta Visualização Seta Imagens e Cores Seta Cores Seta "Aba" Folha de estilo css, e adicione esse código em sua folha de estilo css:
Código:
.notice {
     background: url(https://i.imgur.com/VWRy0Mc.png) repeat-x 0 0;
     color: #FFF;
     width: 83%;
     font-weight: normal;
     padding: 13px 15px;
     margin-bottom: 2.5em;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
     border-radius: 6px;
     -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);
     position: relative;
     left: 34px;
}
 .notice p {
     margin-bottom: 1.5em;
}
 .notice p:last-child {
     margin-bottom: 0;
}
 .notice h5 {
     font-size: 14px;
     font-weight: bold;
     margin-bottom: .65em;
}
 .notice:before {
     content: "";
     background: url(https://i.imgur.com/PcLYd52.png) no-repeat 100% 0;
     width: 33px;
     height: 40px;
     position: absolute;
     left: -34px;
     top: 9px;
}
 .notice-success {
     background-color: #EEF4D4;
     color: #596C26;
     border: 1px solid #8FAD3D;
}
 .notice-success:before {
     background-position: 100% 0;
}
 .notice-warn {
     background-color: #FFEA97;
     color: #796100;
     border: 1px solid #E1B500;
}
 .notice-warn:before {
     background-position: 100% -800px;
}
 .notice-alert {
     background-color: #EFCEC9;
     color: #933628;
     border: 1px solid #AE3F2F;
}
 .notice-alert:before {
     background-position: 100% -400px;
}
 .notice-info {
     background-color: #C6D8F0;
     color: #285797;
     border: 1px solid #4381CD;
}
 .notice-info:before {
     background-position: 100% -1200px;
}
.guest {
    background-color: #F3E3E6;
    border: 1px solid #E599AA;
    color: #80001C;
    padding: 10px;
    display: block;
    margin: 15px;
    font-size: 11px;
}



Exemplo:
Código:
[tagname="Title"]My Content[/tagname]
Pode ser substituído por:
Código:
<div class="some-class"><p>Title</p>My Content</div>



Passos de utilização:

close
-> close: true <- significa que a tag precisa ser fechada. Por exemplo:
Código:
[tagname]Meu conteúdo[/tagname]

defaultOption
-> defaultOption <- irá adicionar um "título" padrão se não for definido um na primeira tag. Por exemplo... Se você adicionar -> defaultOption: 'Algum texto' <- Veja um exemplo:
Código:
[tagname]Meu conteúdo[/tagname]
Pode ser substituído por:
Código:
<div class="some-class"><strong>Algum texto</strong>Meu conteúdo</div>
'Algum texto' será adicionado automaticamente se você não definir um título.

replacement
-> replacement <- irá substituir as tags por uma estrutura html definida por você. Por exemplo:
Código:
replacement: '<div class="notice notice-alert"><h5>{option}</h5><p>{content}</p></div>'
A tag [alert] seria substituída pela estrutura html definida acima.
Código:
{
    tag: 'alerta',
    close: true,
    replacement: '<div class="notice notice-alert"><h5>{option}</h5><p>{content}</p></div>'
},

replace
Você pode usar 'replace' para alterar valores de tag criando uma função com algum tipo de condição predefinida ou algo assim. Por exemplo:
Código:
{
    tag: 'daemon',
    close: true,
    replacement: '<div class="daemon-box"><p>{option}</p><hr>{content}</div>',
    replace: function(option, content) {
        if (content.indexOf("shazam") !== -1) {
            return {
                option: 'SHAZAM ALERT',
                content: 'OMG, you entered the magic word :O'
            };
        }
    }
}
Veja a seguinte imagem como seria o efeito deste código acima:
Clique aqui para ver:
[Plugin] Criar tags bbcode - Página 2 Sem_ty12

Importante:
Para criar tags bbcode, leia as notações dentro do código

Sugestões de BBCODE
Sugestões:
1: Mensagem de retorno para visitantes:
Código:
{
    tag: 'guest',
    close: true,
    replacement: '<div class="guest">{content}</div>',
    replace: function(option, content) {
        if (_userdata.session_logged_in < 1) {
            return 'Você precisa estar conectado ao fórum para visualizar este conteúdo.';
            return content;
        }
    }
}

2: Miniatura de imagem do vídeo do youtube:
[Plugin] Criar tags bbcode - Página 2 1-8
Código:
{
    tag: 'ytscreen',
    replacement: '<a href="https://www.youtube.com/watch?v={ATTR}"><img src="http://i.ytimg.com/vi/{ATTR}/mqdefault.jpg" width="320px" height="180px" alt="Clique Para Assistir" title="Clique Para Assistir"></a><br>Clique Na Imagem Para Assistir'
}

3: Fórum ID:
[Plugin] Criar tags bbcode - Página 2 KqcydrW
Código:
{
    tag: 'forum',
    close: true,
    replacement: '<a href="/f{ATTR}-" id="forum_id">{content}</div>'
}

4: Revelar (BBCode que imita o Spoiler):
Código:
{
    tag: 'reveal',
    close: true,
    defaultOption: 'Reveal',
    replacement: '<dl class="reveal-box"><dt style="cursor: pointer;" onclick="$(this.nextSibling.firstChild).toggle();">{option}</dt><dd><div style="display:none" class="revealbox-content">{content}</div></dd></dl>'
}

5: Botão Download:
Código:
{
    tag: 'download',
    replacement: '<a href="{ATTR}"><img src="https://i.imgur.com/WW2efTS.png"></a><br>Download Link: <a href="{ATTR}">{ATTR}</a>'
}


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

Daemon
Membro do fórum

Masculino
Inscrito dia : 02/03/2012
Mensagens : 1132
Pontos ativos : 1825

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo


[Plugin] Criar tags bbcode - Página 2 Empty Re: [Plugin] Criar tags bbcode

Mensagem por Chanp 10.06.20 4:10

@Diamante Rosa escreveu:Eu não encontrei

Crie uma questão no setor de suporte e aguarde uma resposta da Equipe Staff. Boa noite.
Chanp

Chanp
Membro do fórum

Masculino
Inscrito dia : 04/01/2018
Mensagens : 1072
Pontos ativos : 1191

https://2forum2.forumeiros.com/

Ir para o topo Ir para baixo

Página 2 de 2 Anterior  1, 2

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


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