[TUTORIAL] Adicionar novo botão no SCEditor

No SCEditor já temos as ferramentas necessárias para trabalhar com o desenvolvimento dum tópico, porém, em alguns casos ter mensagens personalizadas e já pré-definidas é vantagem tanto para os Moderadores, quanto para os próprios membros que buscam facilidades ao responder um tópico.

--> Tutoriais, dicas e astúcias <--
Adicionar novo botão no SCEditor de Forumeiros

1º - Gerenciar as páginas JavaScript:
Precisamos definir um código JavaScript que mudará o link do botão Novo tópico em um determinado subfórum. Por isso, vamos acessar as páginas JavaScript do fórum.

Painel de Controle ->> Módulos ->> HTML & JAVASCRIPT ->> Gestão dos códigos JavaScript

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos nos tópicos ou Em todas as páginas para pegar na página de Respostas e Novo tópico.

Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

2º - Código JS a ser utilizado:
Adicione o seguinte código:

Código:

$(window).load(function() {
    var settings = {
      img : 'http://2img.net/i/fa/admin/icones/small_ico/configuration.png',
      title : 'Moderação'
    };
    if (_userdata["user_level"] == '1' || _userdata["user_level"] == "2") {
        $('.sceditor-group:last').after('<div class="sceditor-group"><a class="sceditor-button sceditor-button-message" title="'+settings["title"]+'"><div style="background:url('+settings["img"]+') no-repeat;"></div></a></div>');
        $('body').append('<div id="messageList" style="z-index:15;display:none;position:absolute;background:#fff;border:1px solid #ccc;padding:3px;"><div id="itens_fa" class="listItem" style="cursor:pointer;">MENSAGEM 1</div><div id="M2" class="listItem" style="cursor:pointer;">MENSAGEM 2</div><div id="M3" class="listItem" style="cursor:pointer;">MENSAGEM 3</div></div>');
     
     
      $('.sceditor-button-message').click(function() {
          var display = $('#messageList').css('display');
          if (display == 'none') {
            var Y = $(this).offset().top;
            var X = $(this).offset().left;
            $('#messageList').show().offset({top:Y + 25,left:X});
          }
          else { $('#messageList').hide(); }
      });
       
      $('#itens_fa').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('MENSAGEM 1',''); });
$('#itens_fa').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('MENSAGEM 2',''); });
$('#itens_fa').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('MENSAGEM 3',''); });
      $('#M2').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('MENSAGEM 4',''); });
      $('#M3').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('MENSAGEM 5',''); });
      $('.listItem').click(function() { $(this).parent().hide(); });
    }
});

3º - Configurar o novo botão:
Para configurar o novo botão em seu fórum, será necessário usar a ferramentas de busca do seu navegador, pressionando o Ctrl + F se por algum motivo você se perder.

var settings = {
img : 'URL_DA_IMAGEM',
title : 'NOME_DO_BOTÃO'
};

Vermelho define uma imagem para o novo botão, sendo aconselhável adicionar uma imagem de tamanho 16px por 16.
O termo "NOME_DO_BOTÃO" será responsável por definir o nome do botão quando o mouse estiver sobre ele.

Em seguida, pressione o botão Ctrl + F e procure por:

Código:

messageList

Ao encontrar, veja as modificações a serem feitas:

<div id="messageList" style="z-index:15;display:none;position:absolute;background:#fff;border:1px solid #ccc;padding:3px;"><div id="itens_fa" class="listItem" style="cursor:pointer;">MENSAGEM 1</div><div id="M2" class="listItem" style="cursor:pointer;">MENSAGEM 2</div><div id="M3" class="listItem" style="cursor:pointer;">MENSAGEM 3</div></div>

Os campos em Verde, poderão conter as mensagens que o Administrador determinar, que ao ser clicado, vai enviar para a caixa de texto. Em seguida, use o Ctrl + F e procure por:

Código:

instance

Ao encontrar, modifique o valor MENSAGEM 1, 2 e 3 no código pelo mesmo valor determinado no campo em Verde já citado.

• Resultado
  
  

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Adicionar novo botão no SCEditor de Forumeiros