[TUTORIAL] Adicionar novo botão no SCEditor

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Adicionar novo botão no SCEditor

Mensagem por Shek em 11/07/14, 05:04 pm



JavaScript



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




- 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.


- Código JS a ser utilizado:
Adicione o seguinte código:
Código:
$(window).load(function() {
    var settings = {
      img : 'http://illiweb.com/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(); });
    }
});


- 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
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17161
Pontos Ativos : 21418

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

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