[Plugin] Criar tags bbcode

Painel de Controle Módulos HTML e Javascript Gestão dos códigos Javascript Criar um novo javascript Investimento Em todas as páginas

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");

Painel de controle Visualização Imagens e Cores Cores "Aba" 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;
}

Código:

[tagname="Title"]My Content[/tagname]

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:

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:

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:

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>'
}