Informações:
Autor: Daemon
Funcionalidade: Todas as versões
Bom, eu decidi postar a versão do Daemon, mesmo eu tendo criado algo parecido, o dele é melhor pois não fica só na caixa de resposta, ele fica fixo em todas as partes, mas enfim, vamos lá!
Acesse:
e Crie um novo Javascript com investimento em todas as paginas com esse codigo:Painel de Controle ☛ Modulos ☛ Html e Javascript ☛ Gestão dos Codigos Javascript
- Código:
$(function() {
if (!$.sceditor) return;
var add_BBCode = [ 'sucesso', 'info', 'aviso', 'alerta' ]; // Insira e remova tags separando-as por aspas e vírgulas
$.sceditor.command.set("tag", {
_dropDown: function(editor,caller,handleIdFunc) {
var content = $('<div><label for="taglabel">' + editor._("Tag") + '</label><select id="selectList"></select></div><div><label for="titlelabel">' + editor._("Title (optional)") + '</label><input type="text" id="titlelabel" value="" /></div><div><input type="button" class="button" value="' + editor._("Inserir") + '" /></div>');
$.each(add_BBCode, function(val, text) {
content.find('#selectList').append( $('<option></option>').val(text).html(text) );
});
content.find('.button').click(function(e) {
var val = content.find("#titlelabel").val();
handleIdFunc(val);
editor.closeDropDown(true);
e.preventDefault();
});
editor.createDropDown(caller,"insertTag",content);
},
// SOURCE MODE
exec: function(caller) {
var editor = this;
$.sceditor.command.get('tag')._dropDown(editor,caller,function(title) {
var name = $("#selectList").val();
var before = '[' + name + ']',
end = '[/' + name + ']';
if(title !== '') {
before = '[' + name + '="' + title + '"]';
}
editor.wysiwygEditorInsertHtml(before,end);
});
},
// WYSIWYG MODE
txtExec: function(caller) {
var editor = this;
$.sceditor.command.get('tag')._dropDown(editor,caller,function(title) {
var name = $("#selectList").val();
var before = '[' + name + ']',
end = '[/' + name + ']';
if(title !== '') {
before = '[' + name + '="' + title + '"]';
}
editor.insertText(before,end);
});
},
tooltip: "Insira uma Tag";
});
toolbar = toolbar.replace(/quote/,'tag,quote');
$('head').append(
'<style type="text/css">' +
'.sceditor-button-tag div {' +
' background: url("https://cdn1.iconfinder.com/data/icons/hawcons/32/698382-icon-45-note-list-16.png") !important;' +
'}' +
' .sceditor-tag {' +
' width:auto;' +
' height:auto;' +
' overflow-y:auto;' +
'}' +
'.sceditor-insertTag select {' +
' margin: 0 0 .75em;' +
'}' +
'</style>'
);
});
Feito isto, acesse:
E adicione esse codigo CSS em sua folha de estilo:Painel de controle ☛ Visualização ☛ Imagens e Cores ☛ Cores ☛ Folha de Estilo
- 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;
}
Resultado será este:
OBS: Talvez esteja pensando, poxa mais o tutorial era pra somente por os 4 itens num só bbcode? infelizmente é... mas, tem o meu tutorial caso queiram ver, que tem o mesmo codigo porém só funcional na caixa de resposta com cada função em um bbcode, veja: https://beststyle.forumeiros.com/t13-