Aggiungi un pulsante Spotify in SCEditor


Tutorial Aggiungi un pulsante Spotify in SCEditor

Messaggio Da Niko Dom 17 Gen 2021 - 1:22

Aggiungi un pulsante Spotify in SCEditor


Il seguente tutorial consentirà all'utente di creare un pulsante in SCEditor, per inserire una playlist di Spotify , utilizzando l'ID della playlist.

Aggiungi un pulsante Spotify in SCEditor KAIkK0O

Installazione del codice Javascript

Sarà sufficiente creare un nuovo codice javascript. Per farlo, andiamo verso Pannello di amministrazione ► e usiamo le seguenti impostazioni:
  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    /**
     * Aggiunta del bottone Spotify nell'editor
     *
     * @author Luiz~
     * @author Kyo Panda
     *
     * @see <a href="https://aiuto.forumattivo.it/">Forum dei forum</a>
     * @licence MIT
     */
    (function($) {
      'use strict';
     
      var faAtributes = {
        scBtn: [
          'class="sceditor-button sceditor-button-spotify" ',
          'data-sceditor-command="spotify" ',
          'unselectable="on" ',
          'title="Inserisci una playlist Spotify" ',
          'style="',
          'background-image: url(http://i.imgur.com/helTFAw.png)!important;',
          'background-size: 16px!important;',
          'background-position: center!important;',
          'background-repeat: no-repeat!important;',
          '"',
        ].join('\n')
      };
     
      $(document).on('ready', function () {
          var $sceditor = $("#text_editor_textarea");
       
          if (!$sceditor.length) {
            return;
          }
     
          // [?] Criar os novos estilos:
          $([
            '<div class="sceditor-group fa-spotify-group">',
            '  <a ' + faAtributes.scBtn + '>',
            '    <div unselectable="on" style="background-image: none!important;">Spotify</div>',
            '  </a>',
            '</div>',
          ].join('\n'))
            .on('click', function () {
              $('.sceditor-insertspotify').toggle();
            })
              .insertAfter('.sceditor-group:last')
          ;
     
          // [?] Colocar o Dropdown no <body>:
          $([
            '<div class="sceditor-dropdown sceditor-insertspotify">',
            '  <div>',
            '    <label for="fa-spotify-input">ID da Playlist (Opcional):</label>',
            '    <input id="fa-spotify-input" value="">',
            '  </div>',
            '  <div>',
            '    <input type="button" class="button" ' +
            '    id="fa-spotify-button" value="Inserir">',
            '  </div>',
            '</div>',
          ].join('\n'))
            .css({
              left: $('.fa-spotify-group').offset().left + 'px',
              top: $('.fa-spotify-group').offset().top + 'px',
              marginTop: '28px',
              display: 'none'
            })
              .appendTo('body')
          ;
     
        // [?] Evento de inserção no SCEditor:
        $('#fa-spotify-button')
          .on('click', function () {
            $sceditor.sceditor('instance').insertText('[spotify]' + $('#fa-spotify-input').val() + '[/spotify]');
            $('.sceditor-insertspotify').toggle();
            $('#fa-spotify-input').val('');
        });
      });
     
      // [?] Substituir a tag nas mensagens:
      $(function () {
        $('.entry-content > div, .content > div').each(function() {
            var $this = $(this);
            $this.html($this.html().replace(/\[spotify\]([^\[]+)\[\/spotify\]/gi, function(text, match) {
              return $('<iframe>', {
                width: 300,
                height: 380,
                frameborder: 0,
                src: 'https://embed.spotify.com/?uri=' + match,
                allowtransparency: true
              }).prop('outerHTML');
            }));
        });
      });
    }(jQuery));


Modifiche e personalizzazione

E' possibile modificare il testo visualizzato sul bottone nell'editor semplicemente modificando 'title="Inserisci una playlist Spotify" ', all'interno del codice Javascript inserito :bene:


Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 24
Messaggi : 8308
Località : Provincia di Varese

Visualizza il profilo https://www.openstudio.one
Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto


 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.