Como inserir uma imagem no fórum?

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

Resolvido Como inserir uma imagem no fórum?

Mensagem por TreiMark em 13/06/15, 08:46 am

Olá,

Quando digito minhas mensagens uso com muita frequência o código abaixo em meu fórum:

Código:
[img]https://latex.codecogs.com/gif.latex? meu_texto_aqui [/img]

Então, gostaria de criar um botão que eu pudesse colocar junto com os demais botões de mensagem, para que quando eu clicar no botão apareça isso que está abaixo na mensagem:

Código:
[img]https://latex.codecogs.com/gif.latex? [/img]

Deste modo, eu posso apenas introduzir meu texto na hora de escrever a mensagem.

Este botão deve aparecer para todos os membros, pois todos eles precisam deste recurso.

Isso é possível? Conto com a ajuda de vocês.
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/
  • 0

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Shek em 13/06/15, 01:09 pm

Boa tarde.

Mas este botão já existe em seu fórum! No seu editor de mensagens, é só clicar na opção "Inserir uma imagem" que terá esta opção.


Atenciosamente,
Shek King

Tópico movido de 'Questões sobre HTML & BBCode' para 'Outras questões'


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
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

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 16/06/15, 02:11 pm

@Shek eu não quero ficar repetindo toda vez que precisar digitar essa parte da url que se repete.
Por isso preciso criar um botão que, toda vez que eu clicar nele, aparecerá o seguinte código:

Código:
[img]https://latex.codecogs.com/gif.latex? [/img]

Essa parte do código sempre se repete, e por mensagem eu preciso utilizar em média 30 vezes esse código acima.

Portanto, é possível criar um botão para tal função?
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/
  • 0

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por DeeW. em 16/06/15, 02:40 pm

Crie um novo código javascript, com investimento em todas as páginas:
Código:

$(function(){
    $('<a class="sceditor-button sceditor-button-code" unselectable="on" title="IMG"><div unselectable="on" style="background-image:url(http://i.imgur.com/EISZPwN.png)">IMG</div></a>').insertBefore('.sceditor-button-size').click(function(){
            $('#text_editor_textarea').sceditor("instance").insertText("[img]https://latex.codecogs.com/gif.latex?","[/img]");
    });
});

Como você não espeficiou, se deseja um ícone personalizado, ou/e um texto, ficou difícil de definir a imagem de ícone.
avatar

DeeW.
Nível 10

Masculino
Inscrito dia : 27/05/2014
Mensagens : 271
Pontos Ativos : 389

Ver perfil do usuário http://webpixel.forum-pro.net https://www.facebook.com/headbanger.d

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 17/06/15, 01:00 pm

Olá @Deew , obrigado por sua resposta, porém precisarei de sua ajuda para me explicar como eu faço isso.

O ícone pode ser este que estou lhe enviando abaixo?



*só é necessário melhor a transparência do botão.

Então, se for possível, necessito que você me explique como inserir depois nas páginas de meu fórum. Se tiver algum tópico que explica o processo, por favor, me recomende.

Desde já, obrigado!
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 19/06/15, 01:58 pm

A imagem de dentro do botão é esta:



O url da imagem é: https://latex.codecogs.com/gif.latex?\TeX
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Rafael em 19/06/15, 02:07 pm

Olá @Admim_Forum,

Veja se assim lhe agrada:
Código:
$(function(){
        $('<a class="sceditor-button sceditor-button-code" unselectable="on" title="IMG"><div unselectable="on" style="background-image: url("https://latex.codecogs.com/gif.latex?TeX");background-position: 0px center;background-size: 17px 10px;">IMG</div></a>').insertBefore('.sceditor-button-size').click(function(){
                $('#text_editor_textarea').sceditor("instance").insertText("[img]https://latex.codecogs.com/gif.latex?","[/img]");
        });
    });

Atenciosamente,
iChees
avatar

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

Ver perfil do usuário http://maisforum.forumeiros.com

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 19/06/15, 02:09 pm

@iChees

Acredito que o código esteja correto, mas preciso de ajuda para aplicar em meu fórum.

Não sei como fazer isso.

Você poderia me ajudar? Ou tem algum tutorial sobre isso?

Desde já obrigado!
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Rafael em 19/06/15, 02:20 pm

Olá @Admim_Forum,

Peço desculpa Louco

No seu painel de controle faça os seguintes passos: Painel de Controle Seta Módulos Seta HTML & JAVASCRIPT Seta Gestão dos códigos JavaScript

Você deve criar um novo JavaScript com investimento nos tópicos e colar o código que lhe passei acima.

Atenciosamente,
iChees
avatar

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

Ver perfil do usuário http://maisforum.forumeiros.com

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 20/06/15, 12:56 pm

o código fornecido não funcionou!
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por VitorC. em 20/06/15, 01:04 pm

Olá caro @Admim_Forum,

queira se certificar de que a opção 'Habilitar o gerenciamento dos códigos JavaScript' esteja marcada como 'Sim'.
Essa opção encontra-se na mesma aba que o ajudeiro lhe informou.

Até mais. zen
avatar

VitorC.
Super usuário

Masculino
Inscrito dia : 22/02/2012
Mensagens : 3792
Pontos Ativos : 4932

Ver perfil do usuário http://nolabels.forumeiros.com

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 20/06/15, 01:04 pm

Ela está habilitada!
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Rafael em 20/06/15, 04:24 pm

Admim_Forum escreveu:Ela está habilitada!

O senhor poderia ativar minha conta em seu fórum ?
avatar

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

Ver perfil do usuário http://maisforum.forumeiros.com

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 21/06/15, 08:52 am

Deixo outra possibilidade...

Ao invés de criar um novo botão, é possível alterar um pré-existente?

Há dois botões que não usaremos no fórum.

A imagem abaixo destaca um desses botões:



É possível alterar as "configurações" desse botão por estas que apresentei?

Seria preciso apenas alterar a função do botão, ou seja, quando clicar nele aparecer o texto abaixo na mensagem:

Código:
[img]https://latex.codecogs.com/gif.latex?[/img]

Aguardo resposta!
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 22/06/15, 02:03 pm

iChees escreveu:O senhor poderia ativar minha conta em seu fórum ?

A conta já está ativa!
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 23/06/15, 01:39 pm

Quase consegui fazer o que queria.

Usando o código JavaScript abaixo obtive o seguinte resultado:

Código:
$(function() {
  if (!$.sceditor) return;

  $.sceditor.command.set('cmd', {

  dropDown : function(editor, caller, callback) {

    // Adicione abaixo as tags que farão parte da sua lista de comandos, separando-as por vírgula

    var items = ['img'];

    var content = $(
    '<div>' +
    '  <div>' +
    '    <input type="button" class="button" value="Inserir">' +
    '  </div>' +
    '</div>'
    );
            $.each(items, function(key, val) {
                  content.find('select').append('<option class="sceditor-cmd-option" value="' + val + '">' + val + '</option>');
            });
            content.find('.button').click(function(e) {
                callback(content.find('select').val());
                editor.closeDropDown(true);
            });
            editor.createDropDown(caller, "cmd", content);
  },
  // WYSIWYG MODE
  exec : function(caller) {
  var editor = this;
      $.sceditor.command.get('cmd').dropDown(editor, caller, function(cmd) {
        var before = '[' + cmd + ']', end = '[/' + cmd + ']', title = $('#cmdValue').val();
        if(title !== '') {
            before = '[' + cmd + '="' + title + '"]';
            editor.wysiwygEditorInsertHtml(before, end);
        }
      });
  },
  // SOURCE MODE
  txtExec : function(caller) {
  var editor = this;
      $.sceditor.command.get('cmd').dropDown(editor, caller, function(cmd) {
        var title = $('#cmdValue').val();
        if(title) {
            editor.insertText('[' + cmd + '="' + title + '"]','[/' + cmd + ']');
        } else {
            editor.insertText("[img]https://latex.codecogs.com/gif.latex?","[/img]");
        }
      });
  }, tooltip: "Inserir Códigos"});
  
  toolbar = toolbar.replace(/quote/,'cmd,quote');

  $('head').append(
  '<style type="text/css">' +
  '.sceditor-button-cmd div {' +
  '  background:url(https://cdn2.iconfinder.com/data/icons/snipicons/500/th-list-16.png) !important}' +
  '  .sceditor-cmd {' +
  '  width:auto;' +
  '  height:auto;' +
  '  overflow-y:auto;' +
  '}' +
  '.sceditor-cmd select {' +
  '  margin: 0 0 .75em;' +
  '}' +
  '</style>'
  );
});

Resultado:

Observe que há um botão "Inserir" e preciso de ajuda para retirar este botão.

Quero que apenas clicando no primeiro botão (Aquele azul com listras - em destaque na imagem) o código já seja inserido na mensagem.

Alguém pode me ajudar?
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 25/06/15, 12:53 pm

Alguém pode ajudar, por favor?
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Sennior em 25/06/15, 08:30 pm

Saudações,

Veja se a modificações com este código:
Código:
$(function() {
  if (!$.sceditor) return;

  $.sceditor.command.set('cmd', {

  dropDown : function(editor, caller, callback) {

    // Adicione abaixo as tags que farão parte da sua lista de comandos, separando-as por vírgula

    var items = ['img'];


            $.each(items, function(key, val) {
                  content.find('select').append('<option class="sceditor-cmd-option" value="' + val + '">' + val + '</option>');
            });
            content.find('.button').click(function(e) {
                callback(content.find('select').val());
                editor.closeDropDown(true);
            });
            editor.createDropDown(caller, "cmd", content);
  },
  // WYSIWYG MODE
  exec : function(caller) {
  var editor = this;
      $.sceditor.command.get('cmd').dropDown(editor, caller, function(cmd) {
        var before = '[' + cmd + ']', end = '[/' + cmd + ']', title = $('#cmdValue').val();
        if(title !== '') {
            before = '[' + cmd + '="' + title + '"]';
            editor.wysiwygEditorInsertHtml(before, end);
        }
      });
  },
  // SOURCE MODE
  txtExec : function(caller) {
  var editor = this;
      $.sceditor.command.get('cmd').dropDown(editor, caller, function(cmd) {
        var title = $('#cmdValue').val();
        if(title) {
            editor.insertText('[' + cmd + '="' + title + '"]','[/' + cmd + ']');
        } else {
            editor.insertText("[img]https://latex.codecogs.com/gif.latex?","[/img]");
        }
      });
  }, tooltip: "Inserir Códigos"});
 
  toolbar = toolbar.replace(/quote/,'cmd,quote');

  $('head').append(
  '<style type="text/css">' +
  '.sceditor-button-cmd div {' +
  '  background:url(https://cdn2.iconfinder.com/data/icons/snipicons/500/th-list-16.png) !important}' +
  '  .sceditor-cmd {' +
  '  width:auto;' +
  '  height:auto;' +
  '  overflow-y:auto;' +
  '}' +
  '.sceditor-cmd select {' +
  '  margin: 0 0 .75em;' +
  '}' +
  '</style>'
  );
});

Abraços.
Sennior
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 26/06/15, 05:15 pm

@Sennior o código não funcionou, ao clicar no botão nada aparece na mensagem.
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Shaman em 27/06/15, 06:07 pm

Olá, fiz um código (Com base em outro código) mais curto mas que funciona Muito feliz troque o script por este:

Código:
$(function(){
      $(function(){
     $('<a class="sceditor-button sceditor-button-imagem" unselectable="on" title="IMAGEM"><div unselectable="on" style="background-image:url(https://cdn2.iconfinder.com/data/icons/snipicons/500/th-list-16.png)">Imagem</div></a>').insertAfter('.sceditor-button-aviso').click(function(){
                $('#text_editor_textarea').sceditor("instance").insertText("[img]https://latex.codecogs.com/gif.latex?","[/img]");
});
      
         });
      });

Até mais! Piscada
avatar

Shaman
Membro do Fórum

Masculino
Inscrito dia : 30/01/2014
Mensagens : 1784
Pontos Ativos : 2448

Ver perfil do usuário http://www.nexplorer.tk https://www.facebook.com/pages/Nexplorer/857666487628799?fref=ts

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 27/06/15, 08:25 pm

@Shaman escreveu:Olá, fiz um código (Com base em outro código) mais curto mas que funciona Muito feliz troque o script por este:

Código:
$(function(){
      $(function(){
     $('<a class="sceditor-button sceditor-button-imagem" unselectable="on" title="IMAGEM"><div unselectable="on" style="background-image:url(https://cdn2.iconfinder.com/data/icons/snipicons/500/th-list-16.png)">Imagem</div></a>').insertAfter('.sceditor-button-aviso').click(function(){
                $('#text_editor_textarea').sceditor("instance").insertText("[img]https://latex.codecogs.com/gif.latex?","[/img]");
});
      
         });
      });

Até mais! Piscada

O código não funcionou, o botão desapareceu...
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Shaman em 27/06/15, 08:54 pm

Qual a versão de seu fórum? Poderia passar o link do mesmo?
avatar

Shaman
Membro do Fórum

Masculino
Inscrito dia : 30/01/2014
Mensagens : 1784
Pontos Ativos : 2448

Ver perfil do usuário http://www.nexplorer.tk https://www.facebook.com/pages/Nexplorer/857666487628799?fref=ts

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 28/06/15, 08:58 am

A versão do fórum é PhpBB3 como você pode ver na descrição de meu perfil.

O link do fórum também pode ser encontrado no perfil na área de "Contato": http://olimpiadaenem.forumeiros.com
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/
  • 0

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Shaman em 28/06/15, 09:18 am

A entendi o código, agora tenho certeza que vai pegar, troque por este:

Código:
$(function(){
      $(function(){
    $('<a class="sceditor-button sceditor-button-imagem" unselectable="on" title="IMAGEM"><div unselectable="on" style="background-image:url(https://cdn2.iconfinder.com/data/icons/snipicons/500/th-list-16.png)">Imagem</div></a>').insertAfter('a.sceditor-button.sceditor-button-quote').click(function(){
                $('#text_editor_textarea').sceditor("instance").insertText("[img]https://latex.codecogs.com/gif.latex?","[/img]");
});
     
        });
      });

Até mais! Piscada
avatar

Shaman
Membro do Fórum

Masculino
Inscrito dia : 30/01/2014
Mensagens : 1784
Pontos Ativos : 2448

Ver perfil do usuário http://www.nexplorer.tk https://www.facebook.com/pages/Nexplorer/857666487628799?fref=ts

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 28/06/15, 09:26 am

@Shaman o código funcionou!!!

Apenas o botão mudou de posição:



Teria como fazer ele voltar para antes do botão 'Citar'?
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/
  • 0

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Shaman em 28/06/15, 09:42 am

Certo, troque por este:

Código:
$(function(){
      $(function(){
    $('<a class="sceditor-button sceditor-button-imagem" unselectable="on" title="IMAGEM"><div unselectable="on" style="background-image:url(https://cdn2.iconfinder.com/data/icons/snipicons/500/th-list-16.png)">Imagem</div></a>').insertBefore('a.sceditor-button.sceditor-button-quote').click(function(){
                $('#text_editor_textarea').sceditor("instance").insertText("[img]https://latex.codecogs.com/gif.latex?","[/img]");
});
     
        });
      });

Resulta?

Shaman zen
avatar

Shaman
Membro do Fórum

Masculino
Inscrito dia : 30/01/2014
Mensagens : 1784
Pontos Ativos : 2448

Ver perfil do usuário http://www.nexplorer.tk https://www.facebook.com/pages/Nexplorer/857666487628799?fref=ts

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark em 28/06/15, 09:52 am

@Shaman escreveu:Certo, troque por este:

Código:
$(function(){
      $(function(){
    $('<a class="sceditor-button sceditor-button-imagem" unselectable="on" title="IMAGEM"><div unselectable="on" style="background-image:url(https://cdn2.iconfinder.com/data/icons/snipicons/500/th-list-16.png)">Imagem</div></a>').insertBefore('a.sceditor-button.sceditor-button-quote').click(function(){
                $('#text_editor_textarea').sceditor("instance").insertText("[img]https://latex.codecogs.com/gif.latex?","[/img]");
});
      
        });
      });

Resulta?

Sim, @Shaman o código funcionou!

Muito Obrigado!

:seta2: Questão resolvida, pode encerrar o tópico!
avatar

TreiMark
Nível 9

Masculino
Inscrito dia : 12/06/2015
Mensagens : 170
Pontos Ativos : 214

Ver perfil do usuário http://promec.forumeiros.com/

Resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Rafael em 28/06/15, 11:08 am

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

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

Ver perfil do usuário http://maisforum.forumeiros.com

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