Como inserir uma imagem no fórum?

[TreiMark]

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.

[Shek]

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

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

[TreiMark]

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

[DeeW.]

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.

[TreiMark]

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!

[TreiMark]

A imagem de dentro do botão é esta:



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

[RafaelS.]

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

[TreiMark]

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

[RafaelS.]

Olá @Admim_Forum,

Peço desculpa

No seu painel de controle faça os seguintes passos: Painel de Controle Módulos HTML & JAVASCRIPT 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

[TreiMark]

o código fornecido não funcionou!

[VitorC.]

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.

[TreiMark]

Ela está habilitada!

[RafaelS.]

Ela está habilitada!

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

[TreiMark]

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!

[TreiMark]

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

A conta já está ativa!

[TreiMark]

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?

[TreiMark]

Alguém pode ajudar, por favor?

[Sennior]

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

[TreiMark]

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

[Shaman]

Olá, fiz um código (Com base em outro código) mais curto mas que funciona 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!

[TreiMark]

Olá, fiz um código (Com base em outro código) mais curto mas que funciona 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!

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

[Shaman]

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

[TreiMark]

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

[Shaman]

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!

[TreiMark]

@Shaman o código funcionou!!!

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



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

[Shaman]

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

[TreiMark]

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!

Questão resolvida, pode encerrar o tópico!

[RafaelS.]

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