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

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 , 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]

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: Regras do Fórum, e o que você não deve fazer neste fórum; Lista de tutoriais e perguntas frequentes; A Equipe de Suporte; A função de busca.

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.

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 ?

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.

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.

Disponha

Tópico resolvido Movido para "Questões resolvidas".