Svelato! Scopo, funzioni e meccanismo di KuroEditor vol.2

Filosofia di sviluppo

Trattandosi di uno strumento per KuroCMS, punto a offrire la massima versatilità rimanendo fedele all'essenza. Un editor WYSIWYG è fondamentale, sviluppato in puro Vanilla JS. Deve essere incredibilmente veloce, senza framework. Ho evitato un approccio strettamente headless per mantenere un accoppiamento debole. Finché il chiamante non specifica un @layer, l'editor può adattarsi al layout dei pulsanti di quest'ultimo per garantire unità visiva – anche se non userò questa opzione in KuroCMS! ahah.

Il CSS si basa unicamente su Tailwind e su stili interni a KuroEditor. La gestione delle tabelle è simile a Dropbox Paper. Per ora, anche se non tutto è rifinito nei minimi dettagli, finché l'usabilità non è compromessa, do la priorità al completamento rispetto a regolazioni marginali. Dopotutto, nulla inizia finché non è finito. Lo pubblico non appena è ragionevolmente utilizzabile.

Specifiche dettagliate

Spiegare le specifiche in un articolo può essere noioso, quindi preferisco mostrarvele con delle immagini.

Come mostrato, KuroEditor offre due viste nel menu superiore: anteprima e HTML. Immagino che la maggior parte degli utenti non userà la vista HTML. È pensata per chi vuole scrivere in HTML funzioni non ancora integrate in KuroEditor, o verificare il comportamento interno dello strumento.

Troviamo poi le icone per emoji, creazione di tabelle, inserimento di elementi multimediali, codice, linee orizzontali, salvataggio automatico, salvataggio e indice. I file multimediali di base possono essere trascinati direttamente nella posizione del cursore, quindi questo pulsante viene usato raramente.

Formattazione di base del testo

Gli strumenti per la formattazione del testo e della riga del cursore compaiono non appena viene selezionato anche un solo carattere. Questo evita di mostrare menu in continuazione e riduce i movimenti del mouse.

Da sinistra: Grassetto, Corsivo, Sottolineato, Barrato. Seguono gli stili H1, H2, ecc., per i titoli. Poi la barra delle citazioni e il blocco avvisi. Seguono il colore del testo, la dimensione del carattere, l'altezza della riga, l'allineamento (sinistra, centrato, destra, giustificato), gli elenchi puntati e numerati. (Tra l'altro, il tasto Tab genera automaticamente un paragrafo.) *Nelle versioni recenti si possono scegliere anche i tipi di carattere.

La priorità assoluta sono le tabelle

La gestione delle tabelle è il punto di forza di KuroEditor. L'inserimento di righe o colonne si ispira a Dropbox Paper: quando il mouse si avvicina a un bordo, compare un pulsante '+'. Un clic è sufficiente per inserire. L'eliminazione avviene tramite il pulsante rosso '-' a destra di una riga o sotto una colonna. Gestire le tabelle è semplicissimo. La fusione e la divisione delle celle si eseguono con un clic. Tramite menu contestuale è possibile regolare spessore e colore dei bordi.

Inserimento flessibile di elementi multimediali

L'inserimento di file multimediali è totalmente libero. Non si limita alle immagini del chiamante; puoi integrare video da YouTube per creare classifiche musicali o playlist. Per inserire un URL da tastiera, basta digitare [[ url ]] per attivare l'auto-espansione.

Uso dell'indice

La struttura dei documenti lunghi (romanzi, contratti) si gestisce facilmente con H1, H2, ecc. L'indice del menu superiore permette di visualizzare a colpo d'occhio lo stato della stesura.

Panoramica dell'integrazione

Infine, l'integrazione è estremamente semplice. Basta inserire una riga di codice nel punto desiderato per l'editor e preparare funzioni di callback per il salvataggio. I dati sono trasmessi in formato HTML. In KuroCMS, questo HTML ricevuto viene memorizzato e gestito come dati dell'articolo. Per maggiori dettagli, fare riferimento al link sottostante. Essendo i punti di accoppiamento minimi, l'integrazione in qualsiasi strumento è facilitata.

Conclusione

I giapponesi adorano le tabelle (proprio come le case giapponesi amano i divisori! ahah). Eppure, pochi editor stranieri offrono implementazioni di qualità, e la personalizzazione visiva lascia spesso a desiderare. Mi stupisce in particolare che la fusione delle celle sia così rara. In ogni caso, spero che KuroEditor si riveli utile.

1. Repository GitHub del codice: https://github.com/Kuro-Boo/KuroEditor
2. Pagina di presentazione di KuroEditor: https://kuro.boo/kuroeditor/
3. Pagina di test di KuroEditor: https://kuro.boo/kuroeditor/sample/