Con questo articolo vi riporto un semplice esempio di editor WYSIWYG che ho creato da integrare in un progetto. Questo esempio gestisce sia la libreria multimediale sia il copia e incolla di elementi da word.
Prima di tutto per poter realizzare l’editor WYSIWYG ho utilizzato bootstrap 5x e la libreria summernote. Questa libreria si basa su tecnologia bootstrap e JQuery ed è opensurce. È mantenuto sotto licenza MIT da una grande comunità. È facile da usare e contiene molte opzioni personalizzabili. Può essere facilmente implementato in qualsiasi framework come React, Django, Angular, ecc.
Come potete vedere dall’immagine qui sopra, ho creato un semplice editor di esempio con funzionalità di base. Implementando alcuni script PHP, ho aggiunto il supporto per il caricamento delle immagini. Queste vengono caricate e memorizzate nella cartella uploads grazie a PHP e salvate in una tabella multimedia di MySQL.
/editor
|-- config.php
|-- index.php
|-- upload.php
|-- js/funzioni.js
|-- css/style.css
|-- list_images.php
|-- list_years.php
|-- delete_image.php
|-- salva_testo.php
|-- uploads/
|-- dbmultimedia.sql
La tabella da creare sul database:
CREATE TABLE multimedia ( idmultimedia INT(11) NOT NULL AUTO_INCREMENT, user_id INT(11) DEFAULT NULL, filename VARCHAR(250) DEFAULT NULL, PRIMARY KEY (idmultimedia) );
Ovviamente è tutta una struttura per un test molto versatile da integrare in qualsiasi progetto. L’editor viene richiamato tramite textarea html: <textarea id=”editortest” name=”contenuto”></textarea> e configurato dallo script JS presente nel file funzioni.js:
toolbar: [
[‘style’, [‘style’]],
[‘font’, [‘bold’, ‘italic’, ‘underline’, ‘clear’]],
[‘fontname’, [‘fontname’]],
[‘color’, [‘color’]],
[‘para’, [‘ul’, ‘ol’, ‘paragraph’]],
[‘table’, [‘table’]],
[‘insert’, [‘link’, ‘picture’]],
[‘misc’, [‘fullscreen’, ‘codeview’,’mediaLibrary’]]
],
Caricare un immagine
Come vedete da questa immagine ho copiato da un sito web l’immagine dentro l’editor.
L’immagine è stata caricata anche dentro la cartella uploads e salvata sul database nella tabella dei media sotto mese e anno correte in modo da poter avere un archivio di immagini riutilizzabili:
Ti consiglio di leggere per copiare e trascinare questo mio articolo molto interessante: https://www.salisnet.eu/2025/02/un-semplice-esempio-di-script-per-trascinare-e-caricare-unimmagine/
Tutto il meccanismo che ci permette di caricare le immagini, trascinandole, è gestito dal file upload.php che fisicamente va a salvare le foto sulla cartella (se non esiste la crea).
La lista delle immagini è gestita dal file php list_images.php che ci visualizza tutte le immagini filtrandole per mese e anno. Per cancellare l’immagine utilizziamo la libreria sul file delete_image.php. Il file salva_testo.php non fa altro che raccogliere la post che inviamo cliccando sul tasto salva.
Il progetto è a vostra disposizione sul mio repository: https://github.com/oldpan73/editor
Un semplice esempio di editor WYSIWYG è un progetto che si può sviluppare e ampliare per potersi staccare dai soliti prodotti confezionati legati spesso a licenze.