Un editor minimalissimo per il tuo blog.

Da Mies van der Rohe a WordPress il passo è breve. Così il motto “less is more” è diventato un progettino del weekend sul blogging.

Ho deciso di capire come funziona un WYSWYG, che sta per “What you see, what you get”, ovvero un editor visuale attraverso il quale scrivere testi e formattarli con grassetti, corsivi, link, immagini e video. Insomma il Microsoft Word in un browser web.

Preludio

In questi giorni di quarantena ho collaborato con un’associazione che mi ha proposto la creazione di un blog. La mia idea era quella di crearlo completamente da zero, limitando il piu possibile quella formattazione “libera” che molti editor (ad esempio wordpress) forniscono. Perchè questo? Perche il design system del sito web (dove verranno visualizzati i post) era estremamente minimale e non considerava tutte le possibilità di tipografia. L’obiettivo è centrare esattamente “i confini” del design system per poter fornire un editor che abbia esattamente il set specifico di formattazioni richieste, ovvero esclusivamente:

• Paragrafo di testo <p></p>
• Titolo <h2></h2>
• Grassetto <strong></strong>
• Corsivo  <i></i>
• Link <a href=""></a>
• Integrazione di un video da Youtube
• Inserire delle tooltip personalizzabili <div class="tip"></div>

L’architettura dell’editor sarà in grado di gestire una configurazione delle formattazioni, in modo da aggiungerne o rimuoverne in futuro.

L’architettura

Ho utilizzato per la prima volta Angular, unito ad una dose di funzioni native javascript che permettono di editare un contenuto on-the-fly. Il core dell’editor si basa su un div con la proprietà contenteditable che lo trasforma un input testuale:

<div contenteditable="true"> Testo editabile. </div>

Per modificare il testo, ho utilizzato un metodo API nativo:

document.execCommand() 

attraverso il quale si può formattare il testo contenuto nel div. Esempio:

document.execCommand("bold")

Dove “bold” è una keyword riconosciuta dal browser. Se vuoi approfondire le possibilità di execCommand, leggi questa documentazione.

Attraverso un semplice Angular Service, semplicemente si cattura l’innerHTML del div che contiene il testo e si invia al DB tramite una chiamata Post.

Qualche screenshot

Il progetto si presenta come un’applicazione a parte, rispetto al sito web dove i post verranno visualizzati. Questo per una maggiore scalabilità (e per l’eventualità che quest’app possa essere copiata su un nuovo blog). Allego alcune viste:

Una vista della lista principale dei post:

Una vista per la scrittura di un nuovo post:

Una vista per la modifica di un post:

Alcune funzionalità implementate:

• Ricerca post per data o stato
• Possibilità di salvare in bozze o di depubblicare un articolo.
• Generazione del permalink a partire dal titolo
• Attachment di un’immagine
• Inserimento di una categoria per post.
• Gestione della data di creazione ed aggiornamento

Disclaimer: Questo progetto è work in progress, e lo sarà per un bel po’. Nel frattempo è utilizzato attivamente per pubblicare sul blog di www.civuoleunpaese.it