Adicionar botão de "download" no editor de texto

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

Atendido / Resolvido Adicionar botão de "download" no editor de texto

Mensagem por impedroferr 20.04.20 23:24

Detalhes da questão


Endereço do fórum: https://www.grupinhodoestudo.com/
Versão do fórum: ModernBB

Descrição


Boa noite, tenho um probleminha por ser leigo na area de java, html e afins.
Gostaria de adicionar um novo botão identico ao "inserir link" porem que vá acompanhado a imagem automaticamente sendo necessario eu apenas inserir literalmente o link do arquivo ou foto a ser aberta ou baixada Adicionar botão de "download" no editor de texto F4OQenG, eu consigo fazer isso manualmente mas como estou fazendo a gestão do forum para uma turma de universidade e toda hora ficar colocando o link para se redirecionar atraves da imagem que eu gostaria que fosse automatica é um saco.

o codigo que eu uso:
Código:
[url=LINK]
[img]https://i.imgur.com/f4OQenG.png[/img][/url]
impedroferr

impedroferr
Nível 1

Masculino
Inscrito dia : 20/04/2020
Mensagens : 3
Pontos Ativos : 5

https://estudosuninga.forumeiros.com/

Atendido / Resolvido Re: Adicionar botão de "download" no editor de texto

Mensagem por pedxz 20.04.20 23:42

Olá @impedroferr,

Bem-vindo ao Fórum dos Fóruns!


Seja bem-vindo ao Fórum dos Fóruns! Como acabou de se inscrever, veja aqui alguns links importantes a saber:


Crie uma nova página JavaScript com investimento em todas as páginas, o ícone que aparecerá no editor é o mesmo que o senhor usa para os downloads!
Código:
(function($) {
  'use strict';     
 
  $(window).on('load', function() {
      var $sceditor = $("#text_editor_textarea");
     
      if (!$sceditor.length) {
        return;
      }
     
      $([
        '<a ',
        '    class="sceditor-button sceditor-button-down"',
        '    data-sceditor-command="down"',
        '    unselectable="on">',
        '    <div unselectable="on">',
        '        Download',
        '    </div>',
        '</a>',
      ].join('\n'))
        .on('click', function() {
            $sceditor.sceditor('instance').insertText('[url=', '][img]https://i.imgur.com/f4OQenG.png[/img][/url]');
        })
        .prependTo('.sceditor-group:last')
      ;
 
      $('<style>', { html: [
        '#main .sceditor-button-down > div {',
        '    background-image: url(\'https://i.imgur.com/f4OQenG.png\');',
        '    background-position: center center;',
        '    background-size: contain;',
        '}',
      ].join('\n') })
        .appendTo('head')
      ;
  });
}(jQuery));

Cordialmente,
pedxz.


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5831
Pontos Ativos : 6937

Atendido / Resolvido Re: Adicionar botão de "download" no editor de texto

Mensagem por impedroferr 21.04.20 2:40

Adorei, notei que ao selecionar o link e depois apertar no botão fica certinho mas ainda para fechar com toque de mestre há a possibilidade de quando eu clickar, pedir para eu inserir o link lá e depois em ok ?
impedroferr

impedroferr
Nível 1

Masculino
Inscrito dia : 20/04/2020
Mensagens : 3
Pontos Ativos : 5

https://estudosuninga.forumeiros.com/

Atendido / Resolvido Re: Adicionar botão de "download" no editor de texto

Mensagem por pedxz 21.04.20 8:11

Altere para:
Código:
(function($) {
  'use strict';
  
  if (! /^(?:\/t\d+(?:p\d+|)-.*|\/post)$/i.test(location.pathname)) return false;
 
  $(window).on('load', function() {
    var $textarea = $('#text_editor_textarea');
 
    if (! $textarea.length) return false;
 
    var $sceditor = $textarea.sceditor('instance');
 
    var $button = $([
      '<a class="sceditor-button sceditor-button-btn-down" title="Inserir download">',
      '  <div unselectable="on" style="background-image: url(\'https://i.imgur.com/f4OQenG.png\');background-position: center center; background-size: contain;">Inserir download</div>',
      '</a>'
    ].join('')).prependTo('.sceditor-group:last');
 
    $button.on('click', function() {
      var url = prompt('Insira o URL...');
      var regex = ['^(?!mailto:)(?:(?:http|https|ftp)://)(?:\\S+(?::\\S*)?@)?','(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d','{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]','\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*','[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]','+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]','{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$'].join('');
 
      if (! url || !(new RegExp(regex,'i')).test(url)) return false;
 
      $sceditor.insertText([
        '[url=', '][img]https://i.imgur.com/f4OQenG.png[/img][/url]'
      ].join(url));
    });
  });
})(jQuery);
Note que a "tag do download" só é inserida caso o senhor adicione o link com o começo http ou https.


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5831
Pontos Ativos : 6937

Atendido / Resolvido Re: Adicionar botão de "download" no editor de texto

Mensagem por impedroferr 22.04.20 1:27

Divino cara, sensacional <3. Agradeço de verdade mesmo

@Pedxz não encontrei o botão de duvida resolvida, está citado que estaria em baixo do nome do meu tópico mas não encontrei.


Resolvido


Última edição por impedroferr em 22.04.20 1:38, editado 2 vez(es) (Razão : Topico resolvido)
impedroferr

impedroferr
Nível 1

Masculino
Inscrito dia : 20/04/2020
Mensagens : 3
Pontos Ativos : 5

https://estudosuninga.forumeiros.com/

Atendido / Resolvido Re: Adicionar botão de "download" no editor de texto

Mensagem por Sleep 22.04.20 1:47

Disponha Feliz

Tópico resolvido


Movido para "Questões resolvidas".
Sleep

Sleep
Usuário destaque

Masculino
Inscrito dia : 10/08/2012
Mensagens : 782
Pontos Ativos : 971

https://syndicaterp.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum