[TUTORIAL] Adicionar novo botão no SCEditor

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

Principal Contribuidor

[TUTORIAL] Adicionar novo botão no SCEditor Empty [TUTORIAL] Adicionar novo botão no SCEditor

Mensagem por Shek 11.07.14 21:04


[TUTORIAL] Adicionar novo botão no SCEditor LmohtLI

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
[TUTORIAL] Adicionar novo botão no SCEditor Painel13

[TUTORIAL] Adicionar novo botão no SCEditor 110111[TUTORIAL] Adicionar novo botão no SCEditor 398853 Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Adicionar novo botão no SCEditor 110210[TUTORIAL] Adicionar novo botão no SCEditor 398853 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.
[TUTORIAL] Adicionar novo botão no SCEditor 110310[TUTORIAL] Adicionar novo botão no SCEditor 398853 Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
[TUTORIAL] Adicionar novo botão no SCEditor 110410[TUTORIAL] Adicionar novo botão no SCEditor 398853 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://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(); });
    }
});


- 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
    [TUTORIAL] Adicionar novo botão no SCEditor Result43





© Fórum dos Fóruns


[TUTORIAL] Adicionar novo botão no SCEditor Act_bottom 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
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos