KuroEditor si evolve! Dietro le quinte delle novità vol.3
Un aggiornamento su KuroEditor con le ultime novità! Spieghiamo in dettaglio le funzioni, i motivi dell'implementazione e la filosofia di design per ottimizzare la scrittura.
L'editor WYSIWYG «KuroEditor», ormai al centro dei prodotti di Kuro-Boo (compresi quelli open source), continua a perseguire prestazioni ultrarapide in vanilla JavaScript senza dipendenze da framework e una grande facilità d'uso. Nel precedente «vol.2», abbiamo introdotto la formattazione di base del testo, il posizionamento dei media e le tabelle stile Dropbox Paper. Tuttavia, l'evoluzione di KuroEditor non si ferma qui. Questa volta evidenziamo le funzioni aggiunte da allora, spiegando le intenzioni di sviluppo e il contesto per offrirvi una storia che non troverete nei soliti manuali. Scoprite la panoramica completa di «KuroEditor vol.3», progettato per esprimere le vostre idee in modo ricco e senza stress.
Tabelle senza limiti: importazione da Excel e layout dettagliato
Una delle funzioni a cui è stata dedicata maggiore attenzione nello sviluppo di KuroEditor è quella delle tabelle. Chiunque abbia usato editor WYSIWYG classici sa quanto sia rudimentale la gestione delle tabelle. Modificare lo sfondo di una cella, unire o dividere le celle sono azioni spesso complesse o del tutto assenti.
Organizzare le informazioni in tabelle curate è invece indispensabile per chiarire comparazioni, tariffe o sintesi di dati. Per questo, KuroEditor offre strumenti avanzati per gestire le tabelle con grande precisione.
Il vantaggio principale risiede nella generazione automatica di tabelle copiando e incollando da Excel, Google Sheets o file CSV. Basta incollare le celle copiate direttamente nell'editor: KuroEditor analizza il formato in background e ricostruisce all'istante una tabella HTML pulita. Questo evita di dover ricreare ogni cella a mano. Crea la tua tabella in Excel e incollala direttamente in tutta semplicità.
L'editor permette anche di regolare lo spessore e il colore dei bordi esterni, interni, o di una linea specifica. Le opzioni di unione (a destra o in basso), divisione, allineamento verticale e colore dello sfondo della cella si gestiscono intuitivamente con il mouse. È questa attenzione per i dettagli che distingue KuroEditor da altre soluzioni.
La differenza tra «Enter» e «Shift+Enter»: la struttura dei paragrafi
Un aspetto essenziale del manuale di KuroEditor riguarda la differenza tra interruzione di linea e paragrafo. A seconda che si prema «Enter» o «Shift + Enter» per andare alla linea successiva, la struttura HTML generata è totalmente diversa. Capire questa distinzione è fondamentale per controllare il layout.
Premere «Enter» crea un nuovo paragrafo (tag <p>), trattato come un blocco indipendente. Poiché le funzioni di allineamento o rientro si applicano per paragrafo, è possibile allineare a destra una singola riga se è isolata nel proprio blocco. Al contrario, «Shift + Enter» inserisce una semplice interruzione di linea (tag <br>) all'interno dello stesso paragrafo. L'insieme è visto come un blocco unico e qualsiasi modifica del rientro interesserà tutte le righe associate.
Questo comportamento evita la spaziatura eccessiva involontaria tra le righe e conserva un controllo semantico preciso. Utilizzate «Shift + Enter» per raggruppare righe corte come indirizzi o poesie, e «Enter» per transizioni logiche. Questo risulta utile per strutturare liste complesse senza forzare formati rigidi.
Questa funzione risulta utile per strutturare liste complesse. In molti strumenti come Microsoft Word o Dropbox Paper, le liste numerate sono possibili, ma a volte è frustrante perché i numeri non si susseguono come si desidera, o non si può inserire un blocco di testo normale tra due elementi della lista. KuroEditor semplifica tutto questo e permette di creare liste complesse senza sforzo.
Il «Blocco arrotondato» per dare ritmo al layout e l'impaginazione del testo
Gli articoli online si limitano spesso a una colonna verticale in cui si alternano testo e immagini in modo monotono. Sebbene la lettura in verticale sia lo standard su dispositivi mobili, questo layout può stancare su schermi grandi. Per risolvere il problema, è stata creata la funzione «Blocco arrotondato (kuro-roundbox)».
Questo blocco si inserisce con un clic dal menu inferiore. Può contenere testo, immagini o tabelle. Un menu contestuale permette di regolare la sua larghezza (dal 30% al 100%) e il suo allineamento (sinistra, centrato, destra).
Il vantaggio principale risiede nell'impaginazione del testo. Allineando un blocco a destra con una larghezza del 45%, il testo successivo si colloca in modo naturale a sinistra. È ideale per aggiungere riquadri o note. Per interrompere questa impaginazione, basta inserire una linea orizzontale (hr) che invii il contenuto successivo sotto il blocco. Questo dona dinamismo e migliora il comfort di lettura.
Le «Schede URL» e scorciatoie emoji per velocizzare la scrittura
I collegamenti sono indispensabili sul web, ma i semplici collegamenti blu di testo a volte non risaltano quando si vuole evidenziare un riferimento importante. KuroEditor risolve questo problema con le «Schede URL (kuro-url-card)».
Durante la creazione di un collegamento, selezionando l'opzione scheda recupera automaticamente i metadati del sito di destinazione (icona, titolo, URL) per generare un blocco visivo elegante. Il lettore identifica immediatamente la destinazione del collegamento. Se il sito non è disponibile, l'editor nasconde gli elementi mancanti. A differenza di altri strumenti come Dropbox Paper che trasformano automaticamente ogni URL in scheda, KuroEditor permette di scegliere tra collegamento classico, scheda semplice o scheda arricchita con immagini.
Per non interrompere il ritmo di scrittura, l'editor integra codici brevi per le emoji. Non cercate più nei menu con il mouse: scrivete semplicemente :smile:, :fire: o :+1: affinché si trasformi all'istante nell'emoji corrispondente. Un grande risparmio di tempo per redattori regolari.
Liste di compiti e «Schede Ricetta» semantiche
KuroEditor integra anche funzioni pratiche per l'uso personale, como le liste di compiti (Todo), utili nelle applicazioni di note.
- Controllare le e-mail
- Preparare il caffè
Scrivere [] all'inizio della riga genera una casella di controllo. Lo stato si salva nel codice HTML dell'articolo. Sulla pagina pubblica, queste caselle servono come elemento visivo fisso e non possono essere selezionate dai lettori, ma rimangono utili per strutturare guide o liste di controllo.
For cooking blogs, l'editor offre una «Scheda Ricetta (kuro-recipe)» strutturata. Riassume porzioni, tempi, ingredienti e passaggi. Questa scheda genera dati strutturati conformi con le linee guida SEO di Google. Per maggiore chiarezza, è limitata a una scheda per articolo (il pulsante si disattiva se ce n'è già una). Per saperne di più, consultate l'articolo sulle ricette di KuroCMS.
Blocchi di codice ottimizzati: riorganizzazione tramite trascinamento e pulsante di copia
Per gli articoli tecnici, la presentazione del codice è cruciale. KuroEditor facilita la vita agli sviluppatori con blocchi di codice interattivi progettati per semplificare la scrittura e la lettura.
È possibile spostare un blocco di codice trascinandolo per la sua area di numeri di riga. È molto più sicuro e pratico che tagliare e incollare testo, operazione che spesso rompe il rientro o danneggia la struttura HTML.
Inoltre, per migliorare l'esperienza dei lettori, uno script dedicato aggiunge automaticamente un pulsante di copia rapida (📋) nell'angolo in alto a destra dei blocchi di codice sulle pagine pubbliche. Un'attenzione speciale che semplifica l'uso degli snippet.
Conclusione: la fedeltà assoluta del WYSIWYG
KuroEditor non cerca solo di allineare il testo, ma di offrire un'esperienza WYSIWYG totale dove il design in fase di editing corrisponde esattamente alla pagina pubblicata. Ottenere questo in JavaScript puro, senza framework o compromessi sulla velocità di caricamento, rappresentava una grande sfida. Grazie al suo design modulare, KuroEditor si integra in poche righe di codice in qualsiasi CMS.