Você não está conectado. Conecte-se ou registre-se

Imagem nas Tags BBcode

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 Imagem nas Tags BBcode em Ter Mar 22, 2016 6:04 pm

Zeek

avatar
Membro ativo


  • Descrição:

Olá, Queria saber como faço para botar 
Imagens nas Tags BBcode como está: http://i.imgur.com/t7oMEvF.jpg

Até logo.

  • Informações:



Fórum:http://simple.forumeiros.com/Versão:PUNBB

Ver perfil do usuário

2 Re: Imagem nas Tags BBcode em Ter Mar 22, 2016 6:18 pm

GSCode

avatar
Admin

Zeek,

Tente dessa forma...

JS > Nos tópicos.

Código:
jQuery(document).ready(function($) {
    var bbCodes = {
        sucesso: {
            replacement: '<div class="alert sucesso"><p style="font-weight: 800;font-variant: small-caps;font-size: 14px;">{ATTR}</p>{CONTENT}</div>'
        },
        aviso: {
            replacement: '<div class="alert"><p style="font-weight: 800;font-variant: small-caps;font-size: 14px;">{ATTR}</p>{CONTENT}</div>'
        },
        informacao: {
            replacement: '<div class="alert infos"><p style="font-weight: 800;font-variant: small-caps;font-size: 14px;">{ATTR}</p>{CONTENT}</div>'
        },
        alerta: {
            replacement: '<div class="alert danger"><p style="font-weight: 800;font-variant: small-caps;font-size: 14px;">{ATTR}</p>{CONTENT}</div>'
        }
    };
    var p = $(".postbody , .blog_message");
    for (var i = 0, e; (e = p[i++]) ; ) {
        var entry = $(e);
        $.each(bbCodes, function(tag, value) {
            var re = new RegExp("\\[" + tag + "(?:=(\"|'?)([^\\]]+)\\1)?\\]([\\s\\S]*?)\\[/" + tag + "]","gi")
              , match = entry.text().match(re);
            if (match) {
                for (var tag in match) {
                    var content = match[tag]
                      , b = "$3";
                    if (value.replace && value.replace(content)) {
                        b = value.replace(content)
                    }
                    replacement = value.replacement.replace(/{ATTR}/g, "$2").replace(/{CONTENT}/g, b);
                    var c = content.replace(re, replacement);
                    entry.html(entry.html().replace(content, c))
                }
            }
        })
    }
});
$(function() {
    if (!$.sceditor)
        return;
    $.sceditor.command.set('cmd', {
        dropDown: function(editor, caller, callback) {
            var items = ['sucesso', 'alerta', 'aviso', 'informacao'];
            var content = $('<div>' + '  <div>' + '    <label>Selecione uma tag</label>' + '    <select></select>' + '  </div>' + '  <div>' + '    <label>Título (opcional)</label>' + '    <input type="text" id="cmdValue" value="" />' + '  </div>' + '  <div>' + '    <label> Mensagem</label>' + '    <input type="text" id="msgValue" value="" />' + '  </div>' + '  <div>' + '    <input type="button" class="button" value="Inserir">' + '  </div>' + '</div>');
            $.each(items, function(key, val) {
                content.find('select').append('<option class="sceditor-cmd-option" value="' + val + '">' + val + '</option>')
            });
            content.find('.button').click(function(e) {
                callback(content.find('select').val());
                editor.closeDropDown(true)
            });
            editor.createDropDown(caller, "cmd", content)
        },
        exec: function(caller) {
            var editor = this;
            $.sceditor.command.get('cmd').dropDown(editor, caller, function(cmd) {
                var before = '[' + cmd + ']'
                  , msg = $('#msgValue').val()
                  , end = '[/' + cmd + ']'
                  , title = $('#cmdValue').val();
                if (title !== '') {
                    before = '[' + cmd + '="' + title + '"]';
                    editor.wysiwygEditorInsertHtml(before, msg, end)
                }
            })
        },
        txtExec: function(caller) {
            var editor = this;
            $.sceditor.command.get('cmd').dropDown(editor, caller, function(cmd) {
                var title = $('#cmdValue').val();
                var msg = $('#msgValue').val();
                if (title) {
                    editor.insertText('[' + cmd + '="' + title + '"]' + msg + '', '[/' + cmd + ']')
                } else {
                    editor.insertText('[' + cmd + ']', '[/' + cmd + ']')
                }
            })
        },
        tooltip: "Lista de comandos"
    });
    toolbar = toolbar.replace(/quote/, 'cmd,quote');
    $('head').append('<style type="text/css">' + '.sceditor-button-cmd div {' + '  background:url(https://cdn2.iconfinder.com/data/icons/snipicons/500/th-list-16.png) !important}' + '  .sceditor-cmd {' + '  width:auto;' + '  height:auto;' + '  overflow-y:auto;' + '}' + '.sceditor-cmd select {' + '  margin: 0 0 .75em;' + '}' + '</style>')
});
if (window.location.pathname.indexOf('/u') == 0) {
    $(document).ready(function() {
        var fbcapa = $('#field_id5  .field_uneditable').text();
        $('#pun-visit').before('<div style="width: 100%; height: 315px; position: relative; background: url(' + fbcapa + ') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" id="fbfundo"><div style="position: absolute; left: 0; width: 100%; bottom: 0;"><table id="fbperfil"><tr><td rowspan="3" id="fbavatar"></td><td style="font-size: 16px;" id="fbnome"></td></tr><tr><td style="font-size: 1.4em;" id="fbrank"></td></tr></table></div></div><style>table#fbperfil tbody tr td#fbnome div.h3 {text-transform: none !important;} h1.page-title{font-size:0px!important;height:30px!important;} #main-content p:nth-child(2) {display:none!important;} #profile-advanced-right .module {display:none!important;} #profile-advanced-left {width:100%!important;} #fbperfil { margin-bottom: -33px; margin-left: 13px; } #fbfundo { border: 2px solid #BDBDBD; -webkit-border-radius: 5px; } #fbavatar { border: 4px solid #fff; -webkit-border-radius: 2px; background-color: white; } #fbavatar img { height: 160px; width: 160px; } #fbnome { padding: 28% 0px 0px 10px; } #fbrank, #fbgrupo { padding: 0px 0 0 10px; } #profile-advanced-layout #tabs { bottom: 0; padding-left: 280px; margin-top: 0px !important; }#profile-advanced-layout #tabs { margin-bottom: -13px !important; margin-left: -10px; } #profile-advanced-details { padding-top: 10px !important; }#fbrank span { margin-bottom: 40px !important; }</style>');
        $('.module:first .main-content img[alt=""]').clone().appendTo($('#fbavatar'));
        $('div#main-content div.module:first .h3:first').clone().appendTo($('#fbnome'));
        $('.module:first .main-content.clearfix.center span').clone().appendTo($('#fbrank'));
        $(function() {
            var fbavatarduplo = [], imagemdupla;
            $("#fbfundo img").filter(function() {
                imagemdupla = $(this).attr("src");
                if ($.inArray(imagemdupla, fbavatarduplo) < 0) {
                    fbavatarduplo.push(imagemdupla);
                    return false
                }
                return true
            }).remove()
        });
        $("table#fbperfil tbody tr td#fbnome div.h3").html(function(_, html) {
            return html.replace("(conectado)", "<img alt='Conectado' title='Conectado' src='http://i.imgur.com/QglVEGE.png' />")
        });
        $(function() {
            var tabfbperfil = function() {
                $('#tabs li').click(function(e) {
                    e.preventDefault();
                    var url = this.firstChild.href;
                    if (url == '#')
                        return;
                    $('#profile-advanced-left').load(url + ' #profile-advanced-left', tabfbperfil)
                })
            }
            ;
            tabfbperfil()
        })
    })
}

CSS:

Código:
.alert.sucesso {
    background-color: #DFF0D8;
    background-image: url(https://cdn0.iconfinder.com/data/icons/super-mono-basic/green/button-check_basic_green.png);
    border-color: #D6E9C6;
    color: #3C763D;
}
.alert.danger {
    background-color: #F2DEDE;
    background-image: url(https://cdn0.iconfinder.com/data/icons/super-mono-basic/red/button-cross_basic_red.png);
    border-color: #EBCCD1;
    color: #A94442
}
.alert {
    -moz-border-radius: 3px;
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
    background: #F9F1C7 url(https://cdn0.iconfinder.com/data/icons/super-mono-basic/yellow/exclamation-circle_basic_yellow.png) no-repeat 5px center;
    border: 1px solid #F6DEAC;
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0,0,0,.4);
    color: #AF8640;
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    margin: 5px 0;
    padding: 15px 15px 15px 65px !important;
    width: 85%
}
.alert.infos {
    background-color: #D9EDF7;
    background-image: url(https://cdn0.iconfinder.com/data/icons/super-mono-basic/blue/information_basic_blue.png);
    border-color: #BCE8F1;
    color: #31708F
}

Para alterar a imagem, altere o link de background-image.

Até mais. Very Happy



Administrador BS - 14/02/16.
Ver perfil do usuário

3 Re: Imagem nas Tags BBcode em Ter Mar 22, 2016 6:29 pm

Zeek

avatar
Membro ativo

Olá, @GSCode 

Funcionou perfeitamente, pórem ficou 2 lista de comandos na Resposta rápida: http://i.imgur.com/klUOFn8.png

Ver perfil do usuário

4 Re: Imagem nas Tags BBcode em Ter Mar 22, 2016 6:35 pm

GSCode

avatar
Admin

@Zeek

Altere o código por:

Código:
jQuery(document).ready(function($) {
    var bbCodes = {
        sucesso: {
            replacement: '<div class="alert sucesso"><p style="font-weight: 800;font-variant: small-caps;font-size: 14px;">{ATTR}</p>{CONTENT}</div>'
        },
        aviso: {
            replacement: '<div class="alert"><p style="font-weight: 800;font-variant: small-caps;font-size: 14px;">{ATTR}</p>{CONTENT}</div>'
        },
        informacao: {
            replacement: '<div class="alert infos"><p style="font-weight: 800;font-variant: small-caps;font-size: 14px;">{ATTR}</p>{CONTENT}</div>'
        },
        alerta: {
            replacement: '<div class="alert danger"><p style="font-weight: 800;font-variant: small-caps;font-size: 14px;">{ATTR}</p>{CONTENT}</div>'
        }
    };
    var p = $(".postbody , .blog_message");
    for (var i = 0, e; (e = p[i++]) ; ) {
        var entry = $(e);
        $.each(bbCodes, function(tag, value) {
            var re = new RegExp("\\[" + tag + "(?:=(\"|'?)([^\\]]+)\\1)?\\]([\\s\\S]*?)\\[/" + tag + "]","gi")
              , match = entry.text().match(re);
            if (match) {
                for (var tag in match) {
                    var content = match[tag]
                      , b = "$3";
                    if (value.replace && value.replace(content)) {
                        b = value.replace(content)
                    }
                    replacement = value.replacement.replace(/{ATTR}/g, "$2").replace(/{CONTENT}/g, b);
                    var c = content.replace(re, replacement);
                    entry.html(entry.html().replace(content, c))
                }
            }
        })
    }
});
$(function() {
    if (!$.sceditor)
        return;
    $.sceditor.command.set('cmd', {
        dropDown: function(editor, caller, callback) {
            var items = ['sucesso', 'alerta', 'aviso', 'informacao'];
            var content = $('<div>' + '  <div>' + '    <label>Selecione uma tag</label>' + '    <select></select>' + '  </div>' + '  <div>' + '    <label>Título (opcional)</label>' + '    <input type="text" id="cmdValue" value="" />' + '  </div>' + '  <div>' + '    <label> Mensagem</label>' + '    <input type="text" id="msgValue" value="" />' + '  </div>' + '  <div>' + '    <input type="button" class="button" value="Inserir">' + '  </div>' + '</div>');
            $.each(items, function(key, val) {
                content.find('select').append('<option class="sceditor-cmd-option" value="' + val + '">' + val + '</option>')
            });
            content.find('.button').click(function(e) {
                callback(content.find('select').val());
                editor.closeDropDown(true)
            });
            editor.createDropDown(caller, "cmd", content)
        },
        exec: function(caller) {
            var editor = this;
            $.sceditor.command.get('cmd').dropDown(editor, caller, function(cmd) {
                var before = '[' + cmd + ']'
                  , msg = $('#msgValue').val()
                  , end = '[/' + cmd + ']'
                  , title = $('#cmdValue').val();
                if (title !== '') {
                    before = '[' + cmd + '="' + title + '"]';
                    editor.wysiwygEditorInsertHtml(before, msg, end)
                }
            })
        },
        txtExec: function(caller) {
            var editor = this;
            $.sceditor.command.get('cmd').dropDown(editor, caller, function(cmd) {
                var title = $('#cmdValue').val();
                var msg = $('#msgValue').val();
                if (title) {
                    editor.insertText('[' + cmd + '="' + title + '"]' + msg + '', '[/' + cmd + ']')
                } else {
                    editor.insertText('[' + cmd + ']', '[/' + cmd + ']')
                }
            })
        },
        tooltip: "Lista de comandos"
    });
    toolbar = toolbar.replace(/quote/, 'cmd,quote');
    $('head').append('<style type="text/css">' + '.sceditor-button-cmd div {' + '  background:url(https://cdn2.iconfinder.com/data/icons/snipicons/500/th-list-16.png) !important}' + '  .sceditor-cmd {' + '  width:auto;' + '  height:auto;' + '  overflow-y:auto;' + '}' + '.sceditor-cmd select {' + '  margin: 0 0 .75em;' + '}' + '</style>')
});

Até mais. Smile



Administrador BS - 14/02/16.
Ver perfil do usuário

5 Re: Imagem nas Tags BBcode em Ter Mar 22, 2016 6:55 pm

Zeek

avatar
Membro ativo

Olá, @GSCode

As imagens que eu quero nas Tags BBCode, ja estão nela porem a imagen so está funcionando na tag alerta

PRINT: http://i.imgur.com/18gRY0w.jpg

Ver perfil do usuário

6 Re: Imagem nas Tags BBcode em Ter Mar 22, 2016 7:02 pm

GSCode

avatar
Admin

@Zeek

Remova o código da lista de comandos que o senhor já tem, e altere o código para o da primeira resposta. Em seguida atualize o CSS para:

Código:

.alert {
    -moz-border-radius: 3px;
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
    background: #F9F1C7 url(https://cdn0.iconfinder.com/data/icons/super-mono-basic/yellow/exclamation-circle_basic_yellow.png) no-repeat 5px center;
    border: 1px solid #F6DEAC;
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0,0,0,.4);
    color: #AF8640;
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    margin: 5px 0;
    padding: 15px 15px 15px 65px !important;
    width: 85%
}
.alert.infos {
    background-color: #D9EDF7;
    background-image: url(https://cdn0.iconfinder.com/data/icons/super-mono-basic/blue/information_basic_blue.png);
    border-color: #BCE8F1;
    color: #31708F
}
.alert.sucesso {
    background-color: #DFF0D8;
    background-image: url(https://cdn0.iconfinder.com/data/icons/super-mono-basic/green/button-check_basic_green.png);
    border-color: #D6E9C6;
    color: #3C763D;
}
.alert.danger {
    background-color: #F2DEDE;
    background-image: url(https://cdn0.iconfinder.com/data/icons/super-mono-basic/red/button-cross_basic_red.png);
    border-color: #EBCCD1;
    color: #A94442
}

Caso não funcionar, existe um código que está dando conflito.
Até mais.



Administrador BS - 14/02/16.
Ver perfil do usuário

7 Re: Imagem nas Tags BBcode em Ter Mar 22, 2016 7:17 pm

Zeek

avatar
Membro ativo

Olá, @GSCode

Ficou tudo certinho porem um probleminha

Selecionando as tag para teste: http://i.imgur.com/L0qbMFO.png

Quando clico em enviar fica assim: http://i.imgur.com/8HtYtvm.png

Ver perfil do usuário

8 Re: Imagem nas Tags BBcode em Ter Mar 22, 2016 8:49 pm

GSCode

avatar
Admin

@Zeek vamos tentar de outra forma...

Apague todos os JS de antes... e adicione os seguintes...

Código:
jQuery(document).ready(function($) {
    var bbCodes = {
        sucesso: {
            replacement: '<div class="alert sucesso"><p style="font-weight: 800;font-variant: small-caps;font-size: 14px;">{ATTR}</p>{CONTENT}</div>'
        },
        aviso: {
            replacement: '<div class="alert"><p style="font-weight: 800;font-variant: small-caps;font-size: 14px;">{ATTR}</p>{CONTENT}</div>'
        },
        informacao: {
            replacement: '<div class="alert infos"><p style="font-weight: 800;font-variant: small-caps;font-size: 14px;">{ATTR}</p>{CONTENT}</div>'
        },
        alerta: {
            replacement: '<div class="alert danger"><p style="font-weight: 800;font-variant: small-caps;font-size: 14px;">{ATTR}</p>{CONTENT}</div>'
        }
    };
    var p = $(".postbody , .blog_message");
    for (var i = 0, e; (e = p[i++]) ; ) {
        var entry = $(e);
        $.each(bbCodes, function(tag, value) {
            var re = new RegExp("\\[" + tag + "(?:=(\"|'?)([^\\]]+)\\1)?\\]([\\s\\S]*?)\\[/" + tag + "]","gi")
              , match = entry.text().match(re);
            if (match) {
                for (var tag in match) {
                    var content = match[tag]
                      , b = "$3";
                    if (value.replace && value.replace(content)) {
                        b = value.replace(content)
                    }
                    replacement = value.replacement.replace(/{ATTR}/g, "$2").replace(/{CONTENT}/g, b);
                    var c = content.replace(re, replacement);
                    entry.html(entry.html().replace(content, c))
                }
            }
        })
    }
});
toolbar = toolbar.replace(/quote/, 'cmd,quote');
$('head').append('<style type="text/css">' + '.sceditor-button-cmd div {' + '  background:url(https://cdn2.iconfinder.com/data/icons/snipicons/500/th-list-16.png) !important}' + '  .sceditor-cmd {' + '  width:auto;' + '  height:auto;' + '  overflow-y:auto;' + '}' + '.sceditor-cmd select {' + '  margin: 0 0 .75em;' + '}' + '</style>')
});

E:

Código:
$(document).ready(function() {
    var entry = $('.post .postbody, .blog_message');
    entry.html(function() {
        return $(this).html().replace(/\[poll](.*?)\[\/poll\]/g, '<div class="vote_to_see">$1</div>')
    });
    var like_post_msg = 'Por favor, curta esta postagem para ter acesso ao conteúdo completo desta mensagem.';
    for (var x = entry, i = 0, e; (e = x[i++]) ; ) {
        if (_userdata.user_level < 1)
            if (document.location.pathname.indexOf('/spa') >= 0 && $(e).parents('.post').find('.author a, .name, .user a[href^="/u"]').text() != _userdata.username || $('.vote-button', e).length)
                $('.secret_code', e).html(like_post_msg)
    }
});
(function() {
    var f = {
        bbcodes: {},
        basics: [],
        attrReg: /.*?=("|'|)(.*?)\1\]/,
        parseTag: function(a, b, d) {
            return a.replace(d ? RegExp("(\\[" + b.tag + "[^\\]]*\\])((?:.|\\r?\\n)*?)\\[/" + b.tag + "]", "g" + (b.insensitive ? "i" : "")) : RegExp("\\[" + b.tag + "[^\\]]*\\]", "g" + (b.insensitive ? "i" : "")), function(a, c, e) {
                d || (c = a);
                c = f.attrReg.test(c) ? c.replace(f.attrReg, "$2") : b.defaultAttr;
                if (b.validate && !(d ? b.validate(e, c) : b.validate(c)))
                    return a;
                b.replace && (a = d ? b.replace(e, c) : b.replace(c),
                "string" === typeof a ? d ? e = a : c = a : a && "object" === typeof a && (e = a.content || e,
                c = a.attr || c));
                return f.swapReplacers(b.replacement, e, c)
            })
        },
        swapReplacers: function(a, b, d) {
            return (a || "").replace(/{CONTENT}/g, b || "").replace(/{ATTR}/g, d || "")
        },
        parse: function(a) {
            for (var b = f.bbcodes, d = f.basics, g = 0, c; c = d[g++]; ) {
                var e = c[0];
                if ("string" === typeof e)
                    for (; -1 !== a.indexOf(e); )
                        a = a.replace(e, c[1]);
                else
                    a = a.replace(e, c[1])
            }
            for (var h in b)
                (d = b[h]) && (d.replacement && d.tag) && (a = f.parseTag(a, d, d.close));
            return a
        },
        add: function(a, b) {
            if (!/^\w+$/.test(a))
                throw new Exception("MBB Tag invalida: " + a);
            b.tag || (b.tag = a);
            "close" in b || (b.close = !1);
            f.bbcodes[a] = b
        },
        addSwap: function(a, b) {
            f.basics.push([a, b])
        }
    };
    window.MBB = f
})();
$(function() {
    var p = $('.post .entry-content , .blog_message');
    for (var i = 0, e; (e = p[i++]) ; ) {
        var text = e.innerHTML;
        text = MBB.parse(text);
        e.innerHTML = text
    }
});
MBB.add('offtopic', {
    close: true,
    replacement: '<div style="padding: 3px; float: right; border: 1px solid; font-size: 0.8em">Off Topic: {CONTENT}</div>'
});
MBB.add('sucesso', {
    close: true,
    replacement: '<div class="alert sucesso"><strong>{ATTR}</strong> {CONTENT}</div>'
});
MBB.add('aviso', {
    close: true,
    replacement: '<div class="alert danger"><strong>{ATTR}</strong> {CONTENT}</div>'
});
MBB.add('infos', {
    close: true,
    replacement: '<div class="alert infos"><strong>{ATTR}</strong> {CONTENT}</div>'
});
MBB.add('alerta', {
    close: true,
    replacement: '<div class="alert"><strong>{ATTR}</strong> {CONTENT}</div>'
});
MBB.add('codebox', {
    close: true,
    replacement: '<codebox><code>{CONTENT}</code></codebox>'
});
MBB.add('twitter', {
    close: true,
    replacement: '@<a href="http://www.twitter.com/{CONTENT}">{CONTENT}</a>'
});
MBB.add('quadrado', {
    close: true,
    replacement: '<div class="quadrado_box"><strong>{ATTR}</strong><br><img src="http://i50.tinypic.com/2lxicrn.png" title="XXXXXX" /><br>{CONTENT}</div>'
});
MBB.add('guest', {
    close: true,
    replacement: '<span class="guest">{CONTENT}</span>',
    replace: function(content) {
        if (!document.getElementById('logout'))
            return 'Você vai ser capaz de ver o conteúdo assim que efetuar o seu registro no fórum. ';
        return content
    }
});
function enviar() {
    var daemon = $('a[href^="/post?t="]').first().attr('href');
    var status = $('#status').val();
    var motivo = $('#motivo').val();
    if (status.length != 0 && motivo.length != 0) {
        msg = status + '\n' + motivo
    } else if (status.length != 0) {
        msg = status
    } else if (motivo.length != 0) {
        msg = motivo
    }
    $.post(daemon, {
        'message': msg,
        'post': '1',
        'attach_sig': '1'
    }, function(e) {
        location.href = $(e).find('a[href^="/viewtopic"]').attr('href')
    })
}
;$(document).on('ready', function() {
    if (!$.sceditor)
        return;
    var add_BBCode = {
        'quadrado': {
            drop: 1,
            imagem: 'http://i.imgur.com/Q2pKUiL.png',
            titulo: 'Quadrado'
        },
        'sucesso': {
            drop: 1,
            imagem: 'http://i.imgur.com/EISZPwN.png',
            titulo: 'Sucesso'
        },
        'alerta': {
            drop: 1,
            imagem: 'http://i.imgur.com/cI8SnOI.png',
            titulo: 'Alerta'
        },
        'aviso': {
            drop: 1,
            imagem: 'http://i.imgur.com/lMsD0nE.png',
            titulo: 'Aviso'
        },
        'infos': {
            drop: 1,
            imagem: 'http://i.imgur.com/40zM1qS.png',
            titulo: 'Informação'
        },
        'guest': {
            drop: 0,
            imagem: 'http://i.imgur.com/0jaJsoB.png',
            titulo: 'Esconder de visitantes'
        },
        'codebox': {
            drop: 0,
            imagem: 'http://imgur.com/dm3jrsU.png',
            titulo: 'Codebox'
        },
        'poll': {
            drop: 0,
            imagem: 'http://i.imgur.com/WL16QyZ.png',
            titulo: 'Secreto'
        }
    };
    var newDrop = '<div class="sceditor-dropdown sceditor-drop" style="display: none;">' + '  <div>' + '    <label unselectable="on">Título</label>' + '    <input type="text" id="drop_valTitle" />' + '  </div>' + '  <div>' + '    <label unselectable="on">Texto</label>' + '    <input type="text" id="drop_valContent" />' + '  </div>' + '  <div>' + '    <input type="button" class="button" value="Inserir" onclick="addBBCode_drop()">' + '  </div>' + '</div>';
    $('body').append(newDrop);
    $.each(add_BBCode, function(key, val) {
        bbcode = key;
        imagem = val.imagem;
        titulo = val.titulo;
        drop = val.drop;
        if (drop == 0) {
            func = 'addBBCode_noDrop(this)'
        } else if (drop == 1) {
            func = 'toggleDropbox(this)'
        }
        $('.sceditor-button-quote').before($('<a>', {
            id: bbcode,
            class: 'sceditor-button sceditor-button-' + bbcode,
            title: titulo,
            onclick: func
        }).html('<div style="background-image:url(' + imagem + ')">' + titulo + '</div>'))
    })
});
function toggleDropbox(bs) {
    var box = $('.sceditor-drop');
    var newId = $(bs).attr('id');
    var currentId = box.attr('id');
    box.attr('id', newId);
    if (box.is(':visible') && newId == currentId) {
        box.hide()
    } else if (!box.is(':visible')) {
        box.css({
            'left': $(bs).offset().left,
            'top': $(bs).offset().top + $(bs).outerHeight(),
            'text-align': 'left'
        }).show()
    } else if (box.is(':visible') && newId != currentId) {
        box.css({
            'left': $(bs).offset().left,
            'top': $(bs).offset().top + $(bs).outerHeight(),
            'text-align': 'left'
        }).show()
    }
}
;function addBBCode_drop() {
    var box = $('.sceditor-drop');
    var tag = box.attr('id');
    var titulo = box.find('#drop_valTitle').val();
    var texto = box.find('#drop_valContent').val();
    var editor = $('#text_editor_textarea').sceditor('instance');
    if (titulo.length == 0 && texto.length > 0) {
        editor.insert('[' + tag + ']' + texto + '[/' + tag + ']')
    } else if (texto.length == 0 && titulo.length > 0) {
        editor.insert('[' + tag + '="' + titulo + '"]', '[/' + tag + ']')
    } else if (titulo.length > 0 && texto.length > 0) {
        editor.insert('[' + tag + '="' + titulo + '"]' + texto + '[/' + tag + ']')
    } else if (titulo.length == 0 && texto.length == 0) {
        editor.insert('[' + tag + ']', '[/' + tag + ']')
    }
    box.find('input[type="text"]').val('');
    box.hide()
}
;function addBBCode_noDrop(bs) {
    var tag = $(bs).attr('id');
    $('#text_editor_textarea').sceditor('instance').insert('[' + tag + ']', '[/' + tag + ']')
};

Ambos com investimento nos tópicos.
Dessa forma irá funcionar.

Até mais. Smile



Administrador BS - 14/02/16.
Ver perfil do usuário

9 Re: Imagem nas Tags BBcode em Ter Mar 22, 2016 11:54 pm

Zeek

avatar
Membro ativo

Olá funciou perfeitamente pode fechar

Vlw @GSCode

Ver perfil do usuário

10 Re: Imagem nas Tags BBcode em Qua Mar 23, 2016 12:00 am

GSCode

avatar
Admin

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]



Administrador BS - 14/02/16.
Ver perfil do usuário

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

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