Aggiungi un pulsante Spotify in SCEditor

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.

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: