Best Style

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

Novos Comandos no Editor

Ir em baixo  Mensagem [Página 1 de 1]

1 Novos Comandos no Editor em 20.12.15 16:48

Sliw

avatar
Administrador
Informações:
Autor
: Daemon
Funcionalidade: Todas as Versões




neste tutorial iremos mostrá-lo como é simples e fácil, adicionar novos comandos ao editor,lembrando que é o terceiro topico que diz a mesma coisa, porém de modos diferentes... (sempre inovando e dando mais possibilidade)

Acesse:
Painel de Controle Modulos Html e Javascript Gestão dos codigos Javascript
Crie um novo Javascript com investimento em todas as paginas com esse codigo:

Código:
/*
* Código: Inserir novos comandos no editor.
* Data de criação: 26/12/2014.
* Autor: Daemon.
* Versão: 1.0.
* Acesse: http://bestskins.net
* Não distribuir, ou remover os créditos do autor.
*/

var add_BBCode = {
      '1': {bbcode: 'sucesso'},
      '2': {bbcode: 'aviso'},
      '3': {bbcode: 'infos'}
};

$(document).on('ready', function() {
var newDrop = '<div class="sceditor-dropdown sceditor-drop" style="display: none;">' +
              '  <div>' +
              '    <label unselectable="on">Inserir...</label>' +
              '    <select id="drop_value">' +
              '        <option value="" selected>--------------</option>' +
              '    </select>' +
              '  </div>' +
              '  <div>' +
              '    <label unselectable="on">Descrição (opcional):</label>' +
              '    <input type="text" id="desc_value" />' +
              '  </div>' +
              '  <div>' +
              '    <input type="button" class="button" value="Inserir" onclick="bbcode_drop()">' +
              '  </div>' +
              '</div>';
$('body').append(newDrop);
    $.each(add_BBCode, function(order, object) {
      bbcode = object.bbcode;
      $('#drop_value').append($('<option>', {
                    value: bbcode
      }).text(bbcode));
    });
$('<a class="sceditor-button" id="custom_command" onclick="toggle_dropbox(this)"><div style="background-image: url(http://i.imgur.com/EyQscqP.png);opacity: 1 !important;">CM</div></a>').insertBefore('.sceditor-button-quote');
});
function toggle_dropbox(bs) {
  var box = $('.sceditor-drop');
  if(box.is(':visible')) {
      box.hide();
  } else {
      box.css({
        'left': $(bs).offset().left,
        'top': $(bs).offset().top + $(bs).outerHeight(),
          'text-align': 'left'
      }).show();
  }
};
function bbcode_drop() {
    var box = $('.sceditor-drop');
    var bbcode = box.find('#drop_value').val();
    var nota = box.find('#desc_value').val();
    var editor = $('#text_editor_textarea').sceditor('instance');
    if(bbcode.length > 0) {
      if(nota.length > 0) {
        editor.insert('[table class="' + bbcode + '"][tr][td]' + nota + '[/td][/tr][/table]');
      } else {
        editor.insert('[table class="' + bbcode + '"][tr][td]','[/td][/tr][/table]');
      }
    }
    box.find('input[type="text"]').val('');
    box.hide();
};

Feito isto acesse:
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo
Adicione esse codigo CSS em sua folha de estilo:

Código:
.postbody .sucesso, .postbody .aviso, .postbody .infos {
width: 75%;
margin: 8px 0;
padding: 8px;
color: #fefefe;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-khtml-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 0;
position: relative;
font: 14px/20px Museo300Regular,Helvetica,Arial,sans-serif;
}
.postbody .infos {
background-color: #2fa9f6;
}
.postbody .sucesso {
background-color: #7EB62E;
}
.postbody .aviso {
background-color: #BE1B00;
}

Resultado:

Ver perfil do usuário http://beststyle.forumeiros.com

2 Re: Novos Comandos no Editor em 20.12.15 16:48

Sliw

avatar
Administrador
Tutorial Aceito

Ver perfil do usuário http://beststyle.forumeiros.com

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