Summernote toolbar custom: aggiungere un pulsante all’editor wysiwyg

Pubblicato il 22 Novembre 2022

Nel tutorial JavaScript di oggi vedremo come aggiungere un pulsante (che richiama una funzione personalizzata) in una toolbar custom dell’editor wysiwyg Summernote. In qualsiasi CMS che si rispetti non può mancare un editor wysiwyg per la creazione e gestione di contenuti; Summernote può essere una buona opzione insieme ai più famosi CKeditor e TinyMCE.

Summernote è un editor open source estremamente leggero e semplice da implementare, supporta Bootstrap e jQuery e funziona bene in tutti i principali browser. Dispone di tutte le funzionalità essenziali per la creazione di contenuti per il web ma, nel caso servisse qualcosa di personalizzato, è possibile estendere la toolbar creando un pulsante custom, la configurazione è estremamente semplice.

Per semplicità implementeremo un pulsante che aggiunge un paragrafo contenente un testo. Configuriamo la toolbar “mytoolbar” in cui inseriamo il pulsante “hello_button”:


$('.summernote').summernote({
        placeholder: 'Type here...',
        tabsize: 2,
        height: 300,
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link', 'table', 'hr']],
            ['misc', ['codeview', 'fullscreen']],
            ['mytoolbar', ['hello_button']]
        ],
        buttons: {
            hello_button: HelloButton
        }
});

Questo pulsante custom richiamerà la funzione “HelloButton” che si occuperà di aggiungere il messaggio all’editor tramite le Basic API get e set fornite da Summernote:


var HelloButton = function (context) {

        var ui = $.summernote.ui;

        var button = ui.button({
            contents: 'hello',
            tooltip: 'Hello',
            click: function () {
                var code = "\r\n" + '<p>HELLO</p>' + "\r\n";
                var markupStr = $('.summernote').summernote('code') + code;
                $('.summernote').summernote('code', markupStr);
            }
        });

        return button.render();

    }

Fatto questo vedremo comparire il nuovo pulsante nell’editor. Possiamo aggiungere tutti i pulsanti di cui abbiamo bisogno, ad ognuno bisognerà associare la rispettiva funzione.

Prima di salutarti, a proposito di web development e nello specifico di progettazione database, ti consiglio di dare un’occhiata a ER Model Generator, un tool gratuito, immediato e che non necessita di registrazione, per disegnare lo schema ER di un database.

Al prossimo tutorial!

Bootstrap Datetimepicker e l'evento change

MooTools Ajax: come effettuare richieste Ajax con MooTools

Scrivere su un'immagine con PHP: ecco come fare

Condividi il post con i tuoi amici o colleghi