[TUTORIAL] Adicionar novo botão no SCEditor
Página 1 de 1 • Compartilhe
[TUTORIAL] Adicionar novo botão no SCEditor
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
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.
Vermelho define uma imagem para o novo botão, sendo aconselhável adicionar uma imagem de tamanho 16px por 16.var settings = {
img : 'URL_DA_IMAGEM',
title : 'NOME_DO_BOTÃO'
};
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
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:<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>
- Código:
instance
- 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 |
Tópicos semelhantes
» Adicionar um novo botão no SCeditor
» Adicionar novo botão no SCEditor
» Adicionar um novo botão no SCEDITOR somente para equipe
» [TUTORIAL] Adicionar novas fontes no SCeditor
» [TUTORIAL] Adicionar botão do FontAwesome ao SCEditor
» Adicionar novo botão no SCEditor
» Adicionar um novo botão no SCEDITOR somente para equipe
» [TUTORIAL] Adicionar novas fontes no SCeditor
» [TUTORIAL] Adicionar botão do FontAwesome ao SCEditor
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos