Como inserir uma imagem no fórum?

+3
DeeW.
Shek
TreiMark
7 participantes

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

Tópico resolvido Como inserir uma imagem no fórum?

Mensagem por TreiMark 13.06.15 12:46

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

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor
  • 0

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Shek 13.06.15 17:09

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.

Como inserir uma imagem no fórum? Result14

Atenciosamente,
Shek King

Tópico movido de 'Questões sobre HTML & BBCode' para 'Outras questões'
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

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 16.06.15 18:11

@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?
TreiMark

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por DeeW. 16.06.15 18:40

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

DeeW.
****

Membro desde : 27/05/2014
Mensagens : 271
Pontos : 389

http://webpixel.forum-pro.net https://www.facebook.com/headbanger.d

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 17.06.15 17:00

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?

Como inserir uma imagem no fórum? Imagem10

*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!
TreiMark

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 19.06.15 17:58

A imagem de dentro do botão é esta:

Como inserir uma imagem no fórum? Gif

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

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por RafaelS. 19.06.15 18:07

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

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 19.06.15 18:09

@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!
TreiMark

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por RafaelS. 19.06.15 18:20

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

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 20.06.15 16:56

o código fornecido não funcionou!
TreiMark

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por VitorC. 20.06.15 17:04

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

VitorC.
Hiper Membro

Membro desde : 22/02/2012
Mensagens : 3794
Pontos : 4939

http://nolabels.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 20.06.15 17:04

Ela está habilitada!
TreiMark

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por RafaelS. 20.06.15 20:24

Admim_Forum escreveu:Ela está habilitada!

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

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 21.06.15 12:52

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:

Como inserir uma imagem no fórum? Possib10

É 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!
TreiMark

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 22.06.15 18:03

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

A conta já está ativa!
TreiMark

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 23.06.15 17:39

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: Como inserir uma imagem no fórum? Result10

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?
TreiMark

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 25.06.15 16:53

Alguém pode ajudar, por favor?
TreiMark

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Sennior 26.06.15 0:30

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
Sennior

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 26.06.15 21:15

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

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Shaman 27.06.15 22:07

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
Shaman

Shaman
Super Membro

Membro desde : 30/01/2014
Mensagens : 1787
Pontos : 2448

http://brasilplayvicio.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 28.06.15 0:25

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

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Shaman 28.06.15 0:54

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

Shaman
Super Membro

Membro desde : 30/01/2014
Mensagens : 1787
Pontos : 2448

http://brasilplayvicio.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 28.06.15 12:58

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
TreiMark

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Shaman 28.06.15 13:18

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
Shaman

Shaman
Super Membro

Membro desde : 30/01/2014
Mensagens : 1787
Pontos : 2448

http://brasilplayvicio.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 28.06.15 13:26

@Shaman o código funcionou!!!

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

Como inserir uma imagem no fórum? Forum10

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

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por Shaman 28.06.15 13:42

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
Shaman

Shaman
Super Membro

Membro desde : 30/01/2014
Mensagens : 1787
Pontos : 2448

http://brasilplayvicio.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por TreiMark 28.06.15 13:52

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!
TreiMark

TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como inserir uma imagem no fórum?

Mensagem por RafaelS. 28.06.15 15:08

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

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

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