[TUTORIAL] Personalizar a paleta de cores do SCEditor

Configurando a paleta de cores

Painel de Controle Geral Mensagens e e-mails Configuração

Instalação do Javascript

Painel de Controle Módulos HTML e Javascript Gestão dos códigos Javascript Criar um novo javascript

Habilitar o gerenciamento dos códigos JavaScript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.

Título - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.

Localização - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. No nosso caso, aplicaremos Em todas as páginas.

Código JavaScript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.

Código:

$(function(){$(function(){
  if ($("#text_editor_textarea").length < 1) return;
  $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {
    var mColorBasic = [],
    html = $('<div />');
           
    // Começa a lista de cores. Cada linha da paleta possui 8 cores, dai estar dividido.
         
    mColorBasic["Preto"] = "#000000";
    mColorBasic["Azul Escuro"] = "#00008B";
    mColorBasic["Verde-Azulado"] = "#008080";
    mColorBasic["Verde Escuro"] = "#006400";
    mColorBasic["Índigo"] = "#4B0082";
    mColorBasic["Carmesim"] = "#DC143C";
    mColorBasic["Laranja"] = "#FF4500";
    mColorBasic["Castanho Escuro"] = "#663300";
   
    mColorBasic["Cinza Escuro"] = "#666666";
    mColorBasic["Azul Royal"] = "#4169E1";
    mColorBasic["Turquesa Escuro"] = "#00CED1";
    mColorBasic["Verde"] = "#008000";
    mColorBasic["Roxo"] = "#9400D3";
    mColorBasic["Vermelho"] = "#FF0000";
    mColorBasic["Laranja Claro"] = "#FF9933";
    mColorBasic["Castanho"] = "#A0522D";
   
    mColorBasic["Cinza Claro"] = "#D3D3D3";
    mColorBasic["Azul Céu"] = "#87CEEB";
    mColorBasic["Ciano"] = "#00FFFF";
    mColorBasic["Verde Maçã"] = "#32CD32";
    mColorBasic["Malva"] = "#DA70D6";
    mColorBasic["Salmão"] = "#FA8072";
    mColorBasic["Dourado"] = "#FFD700";
    mColorBasic["Castanho Claro"] = "#CD853F";
   
    mColorBasic["Branco"] = "#FFFFFF";
    mColorBasic["Turquesa Pálido"] = "#AFEEEE";
    mColorBasic["Azul Esveridado"] = "#7FFFD4";
    mColorBasic["Verde Pálido"] = "#98FB98";
    mColorBasic["Rosa"] = "#FFC0CB";
    mColorBasic["Pêssego"] = "#FFDAB9";
    mColorBasic["Amarelo"] = "#FFFF00";
    mColorBasic["Madeira"] = "#DEB887";
         
    // Acaba a lista de cores
         
    for(key in mColorBasic) html.append('<div class="color-option" title="' + key + '"><span color="' + mColorBasic[key] + '" style="background-color: ' + mColorBasic[key] + ' !important;"></span></div>');
         
    html.find('span').click(function(e) {
      callback($(this).attr('color'));
      editor.closeDropDown(true);
      e.preventDefault();
    });
         
    editor.createDropDown(caller, "color-picker", html);
  }
})});

Instalação do CSS

Painel de controle Visualização Imagens e Cores Cores Folha de estilo CSS

Salvar CSS - Salva todo o CSS em arquivo TXT em seu computador. Em outras palavras, permite criar um backup de seu CSS personalizado.

Forçar CSS base do fórum - Força o CSS padrão da versão de seu fórum, ignorando o CSS personalizado. Caso queira verificar o CSS base d fórum, basta clicar no link "Ver CSS base do fórum".

Desativar o CSS base - Desativa o CSS base da versão de seu fórum, e permite que somente o CSS personalizado do fórum opere em todo o fórum.

Melhorar CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo.

Código:

/* Icones da paleta */
.color-option {
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  border: 2px solid #fff !important;
  margin: 3px !important;
  box-shadow: 0 0 2px #778899;
  cursor: pointer !important;
}
 
.color-option span{
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  margin: -1px!important;
}
 
.color-option, .color-option span {
  border-radius: 2px;
}
 
/* Construção da paleta - ATENÇÃO: A largura influencia a quantidade de cores por linha */
.sceditor-dropdown.sceditor-color-picker {
  width: 180px !important;
  padding: 5px !important;
  border-radius: 5px !important;
}

• Resultado:
  
  

Dúvidas gerais

• Como posso mudar as cores?
  Você pode alterar as cores no código JavaScript, na parte que possui esta formatação:
  

  Código:

  mColorBasic["Preto"] = "#000000";

  Neste caso, pegámos a cor Preto, mas pode alterar para a que quiser. Para alterar cores, tem que seguir este padrão:
  

  mColorBasic["{COR}"] = "{HEXADECIMAL}";

  {COR} - O nome da cor. Este irá aparecer quando passar com o mouse por cima.
  {HEXADECIMAL} - O código Hexadecimal da cor escolhida. Lembrando que o tipo Hexadecimal é do seguinte formato: #(6 caracteres/números), como por exemplo: #000000 (Preto). Pode encontrar as cores em: ColorHexa.
  
  
• Quantas cores posso ter?
  Como o código só funciona no modo Simples da paleta de cores, você está limitado a 32 cores disponíveis. Sempre que adicionar mais do que 32 cores à lista do JavaScript, ele interpreta apenas a última cor que adicionou para além das 32, adicionando a mesma na última posição da paleta (canto inferior direito).