Adicionar botões na Caixa de Resposta Rápida

por Kenno LP 21.06.17 15:29

Detalhes da questão

Endereço do fórum: http://survivewarz.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá!
Eu sou o Kenno, ACP do fórum Scavenge WarZ (mais uma vez, hehe).

Eu queria esclarecer uma dúvida com vocês.

No final de uma página que tem um tópico, tem uma caixa de resposta rápida.
Eu gostaria de adicionar 4 botões nessa caixa (eu sei que é possível), que quando clicamos nos botões, em cada um deles coloque automaticamente na caixa de texto de resposta rápido uma frase definida.

Por exemplo, se eu clicasse num desses botões da caixa de resposta rápida, automaticamente, aparecia uma mensagem na caixa de texto, pronta para enviar (depois era só clicar no botão para enviá-la como resposta).

E, depois de eu ter esses botões, na Caixa de Resposta Rápida, eu gostaria que só administradores (a partir de um cargo que eu escolhesse, até ao ACP do fórum), pudessem ter os botões na caixa de resposta rápida, e que os conseguissem usar, e os membros do fórum que não são administradores, que não aparecesse os botões na caixa de resposta rápida para eles, para eles não usarem.

Espero que me possam ajudar.

por Roevs 21.06.17 15:54

Olá,

Leia o tutorial abaixo, e veja se é o que deseja

https://ajuda.forumeiros.com/t93900-
https://ajuda.forumeiros.com/t91874-

Até

por Kenno LP 21.06.17 17:03

Sim, era isso iPrompt, mas eu não percebi como mudar o texto automático que vem quando clicamos nos botões :/ Gostaria de alterá-los.

por Roevs 21.06.17 17:08

Olá,

Caso seja sobre o tutorial abaixo, nele explica como alterar, você altera no código JAVASCRIPT

https://ajuda.forumeiros.com/t93900-

Até

por Luiz 21.06.17 17:12

Na verdade o tutorial acima está bem defasado.
Se o senhor quiser, podemos fazer um melhor. Feliz

o/

por Kenno LP 21.06.17 17:21

iPrompt escreveu:Olá,

Caso seja sobre o tutorial abaixo, nele explica como alterar, você altera no código JAVASCRIPT

https://ajuda.forumeiros.com/t93900-

Até

Sim, é esse, mas eu acho que vocês não estão percebendo bem o que eu pretendo.. O tutorial que você me mandou explica como alterar a mensagem que aparece quando colocamos o mouse em cima dos botões, e eu já fiz isso com sucesso.. Eu não pretendo isso.

Depois de você completar o tutorial que você me mandou, você vai lá na caixa de resposta rápida, e estão lá os botões.
Quando você clica em qualquer um dos botões, ele automaticamente escreve uma mensagem na caixa de texto.

Eu gostaria de saber como editar essa mensagem para todos os botões.
Se me puder explicar, agradeço desde já.

por Luiz 21.06.17 17:22

Luiz~ escreveu:Na verdade o tutorial acima está bem defasado.
Se o senhor quiser, podemos fazer um melhor.

o/

Você leu essa mensagem? Envergonhado

por Kenno LP 21.06.17 17:24

Li, então, por favor, me explique como eu faço o que estou pretendendo.

por Luiz 21.06.17 17:56

Remova o JavaScript passado anteriormente, caso o senhor tenha criado um.
Em seguida, crie um novo JavaScript, com o código:

Atualizado:

Código:: /** *! Criar botões no SCEditor. * * @licence MIT * @author Luiz~ * @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a> */ (function ($) { 'use strict'; /* *! Configurações: * Aqui é o local o qual você irá configurar seu JavaScript, * podendo criar quandos botões desejar. * Basta seguir o padrão, conforme colocado abaixo... */ var config = { buttons: [ { icon: 'http://i.imgur.com/t8uGPoX.png', text : 'Mensagem de aviso, ou qualquer outra coisa.', onlyMod: true }, { icon: 'http://i.imgur.com/bHuEfLt.png', text: 'Mensagem de sucesso, ou qualquer outra coisa. :)', onlyMod: false } ], styles: [ '.fa-extended-button div {', ' background-size: 16px 16px;', ' background-position: center center;', '}' ].join('\n') }; $(window).on('load', function () { var $textarea = $('#text_editor_textarea'); if (!$textarea.sceditor) { console.log('O SCEditor não está presente nesta página.'); return; } var $sceditor = $textarea.sceditor('instance'); var $lastGroup = $('.sceditor-group').last(); /* * Colocando os estilos no <head>: */ $(['<style type="text/css">', config.styles, '</style>'].join('\n')).appendTo('head'); /* * Parte principal do código: * É aqui que nós criamos os botões com base nas * configurações as quais setamos acima. */ $.each(config.buttons, function (index, button) { /* * Condição para checar se o usuário é um moderador, * e se a configuração "onlyMod" está marcada como true. */ if (button.onlyMod && _userdata.user_level <= 0) { return; } $([ '<div class="sceditor-group fa-extended-group">', ' <a class="sceditor-button fa-extended-button" unselectable="on" title="' + button.text + '">', ' <div unselectable="on" style="background-image: url(' + button.icon + ')"></div>', ' </a>', '</div>', ].join('\n')) .insertAfter($lastGroup) .on('click', function () { $sceditor.insertText(button.text); }) ; }); }); }(jQuery));

No código acima, temos essa parte:

Código:: buttons: [ { icon: 'http://i.imgur.com/t8uGPoX.png', text : 'Mensagem de aviso, ou qualquer outra coisa.', onlyMod: true }, { icon: 'http://i.imgur.com/bHuEfLt.png', text: 'Mensagem de sucesso, ou qualquer outra coisa. :)', onlyMod: false } ],

É nela em que os botões são criados.
Como pode perceber, nós abrimos duas chaves ( { e } ) e dentro delas, nós colocamos a configuração dos botões.

Por exemplo:

Código:: { icon: 'http://i.imgur.com/t8uGPoX.png', text : 'Mensagem de aviso, ou qualquer outra coisa.', onlyMod: true },

Existem três campos para o senhor completar:

icon

: O senhor deverá colocar o ícone do botão. Uma URL de imagem.

text

: O senhor deverá colocar o texto que será inserido ao clicar no botão.

onlyMod

: Chamamos isso de boolean no JavaScript, isto é, uma configuração que só aceita true ou false.
Se colocado como true, somente moderadores poderão ver o botão, enquanto se for colocado como false, todos os usuários poderão ver.

Você pode criar quantos grupos quiser, basta colocar mais um conjunto como este:

Código:: { icon: 'http://i.imgur.com/t8uGPoX.png', text : 'Mensagem de aviso, ou qualquer outra coisa.', onlyMod: true },

Lembre-se de colocar vírgula ao final de todos os grupos, exceto no último!

o/

---

Edit:
Tinha um pequeno erro no código, que impedia os botões de aparecerem. Troque o código, caso o senhor já tenha colocado.

Feliz

por Kenno LP 21.06.17 18:42

Não funcionou, Luiz~ :/
Os botões não aparecem mais na caixa de resposta rápida.

Eu usei o seguinte código (eu que o editei):

Código:: /** *! Criar botões no SCEditor. * * @licence MIT * @author Luiz~ * @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a> */ (function ($) { 'use strict'; /* *! Configurações: * Aqui é o local o qual você irá configurar seu JavaScript, * podendo criar quandos botões desejar. * Basta seguir o padrão, conforme colocado abaixo... */ var config = { buttons: [ { icon: 'http://i.imgur.com/EISZPwN.png', text : 'Sua conta foi aceita na whitelist, chame seus amigos para jogar e bom jogo!', onlyMod: true }, { icon: 'http://i.imgur.com/lMsD0nE.png', text : 'Recusado. Motivo: Fake, antiga conta banida.', onlyMod: true }, { icon: 'http://i.imgur.com/cI8SnOI.png', text : 'Sua conta não está em nosso banco de dados, se registre no nosso servidor, só assim poderá ser aceito. IP: 192.95.8.254:2222', onlyMod: true }, { icon: 'http://i.imgur.com/bHuEfLt.png', text: 'Recusado. Motivo: Nick Inválido. Crie uma nova whitelist com um nick válido!', onlyMod: true } ], styles: [ '.fa-extended-button div {', ' background-size: 16px 16px;', ' background-position: center center;', '}' ].join('\n') }; $(function () { var $textarea = $('#text_editor_textarea'); if (!$textarea.sceditor) { console.log('O SCEditor não está presente nesta página.'); return; } var $sceditor = $textarea.sceditor('instance'); var $lastGroup = $('.sceditor-group').last(); /* * Colocando os estilos no <head>: */ $(['<style type="text/css">', config.styles, '</style>'].join('\n')).appendTo('head'); /* * Parte principal do código: * É aqui que nós criamos os botões com base nas * configurações as quais setamos acima. */ $.each(config.buttons, function (index, button) { /* * Condição para checar se o usuário é um moderador, * e se a configuração "onlyMod" está marcada como true. */ if (button.onlyMod && _userdata.user_level <= 0) { console.log('n mod') return; } $([ '<div class="sceditor-group fa-extended-group">', ' <a class="sceditor-button fa-extended-button" unselectable="on" title="' + button.text + '">', ' <div unselectable="on" style="background-image: url(' + button.icon + ')"></div>', ' </a>', '</div>', ].join('\n')) .insertAfter($lastGroup) .on('click', function () { $sceditor.insertText(button.text); }) ; }); }); }(jQuery));

Espero que me possa ajudar.

por Kenno LP 21.06.17 18:43

Ups! Não tinha visto a mensagem editada ainda! Vou tentar agora, com o novo código.

por Luiz 21.06.17 18:50

Atenção!

Você não pode fazer UP's antes de se completar 24 horas desde a última mensagem deste tópico! Por este motivo, nós pedimos que leia as regras do setor de suporte e principalmente a do Fórum dos Fóruns para não cometer novos erros!
Regras do FdF | Regras do Setor de Suporte

Olá,

Por favor, não poste mensagens consecutivas antes de 24 horas.
Você não pode dar quebras de linha no JavaScript. Use \n ao invés.

Código:: /** *! Criar botões no SCEditor. * * @licence MIT * @author Luiz~ * @see <a href="http://ajuda.forumeiros.com">Fórum dos Fóruns</a> */ (function ($) { 'use strict'; /* *! Configurações: * Aqui é o local o qual você irá configurar seu JavaScript, * podendo criar quandos botões desejar. * Basta seguir o padrão, conforme colocado abaixo... */ var config = { buttons: [ { icon: 'http://i.imgur.com/EISZPwN.png', text : 'Sua conta foi aceita na whitelist, chame seus amigos para jogar e bom jogo!', onlyMod: true }, { icon: 'http://i.imgur.com/lMsD0nE.png', text : 'Recusado.\nMotivo: Fake, antiga conta banida.', onlyMod: true }, { icon: 'http://i.imgur.com/cI8SnOI.png', text : 'Sua conta não está em nosso banco de dados, se registre no nosso servidor, só assim poderá ser aceito.\n IP: 192.95.8.254:2222', onlyMod: true }, { icon: 'http://i.imgur.com/bHuEfLt.png', text: 'Recusado. \nMotivo: Nick Inválido. Crie uma nova whitelist com um nick válido!', onlyMod: true } ], styles: [ '.fa-extended-button div {', ' background-size: 16px 16px;', ' background-position: center center;', '}' ].join('\n') }; $(window).on('load', function () { var $textarea = $('#text_editor_textarea'); if (!$textarea.sceditor) { console.log('O SCEditor não está presente nesta página.'); return; } var $sceditor = $textarea.sceditor('instance'); var $lastGroup = $('.sceditor-group').last(); /* * Colocando os estilos no <head>: */ $(['<style type="text/css">', config.styles, '</style>'].join('\n')).appendTo('head'); /* * Parte principal do código: * É aqui que nós criamos os botões com base nas * configurações as quais setamos acima. */ $.each(config.buttons, function (index, button) { /* * Condição para checar se o usuário é um moderador, * e se a configuração "onlyMod" está marcada como true. */ if (button.onlyMod && _userdata.user_level <= 0) { return; } $([ '<div class="sceditor-group fa-extended-group">', ' <a class="sceditor-button fa-extended-button" unselectable="on" title="' + button.text + '">', ' <div unselectable="on" style="background-image: url(' + button.icon + ')"></div>', ' </a>', '</div>', ].join('\n')) .insertAfter($lastGroup) .on('click', function () { $sceditor.insertText(button.text); }) ; }); }); }(jQuery));

o/

por Kenno LP 21.06.17 18:53

Tem como colocar uma palavra a negrito?

por Luiz 21.06.17 18:59

Basta colocar:

Código:: [b] PALAVRA AQUI [/b]

o/

por Kenno LP 21.06.17 19:03

Muito obrigado ajudeiro Luiz~ por cumprir o seu trabalho muito bem e esclarecer a minha dúvida.
Pode dar como resolvido, pois funcionou Feliz

por Luiz 21.06.17 19:09

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.

Adicionar botões na Caixa de Resposta Rápida