Per creare l'aspetto visivo di questo sito e in particolare la possibilità di inserire immagini all'interno delle notizie, è da tanto che uso l'approccio di inserire codici html tramite il campo < textarea >.
Sfortunatamente l'approccio di scrivere etichette HTML all'interno di un campo di testo può produrre molto facilmente errori, basta infatti poco, in un testo pieno di frasi e di stili, per perdere di vista una parentesi angolare e non chiudere correttamente un tag, Nella struttura di codici di questo sito, uso infatti un filtro XSLT per produrre la formattazione finale da mostrare agli utenti.
Nel creare la struttura visiva del sito, per inserire le immagini all'interno degli articoli, ho ideato da tempo un codice di template che poi il server trasforma nel tag IMG opportuno per mostrare la fotografia che ho scelto. Diventa scomodo però editare gli articoli con questi tag e non avere la certezza di non aver fatto errori fino a quando, salvando il file, non arriva il messaggio di salvataggio corretto. Per questo motivo, ultimamente ho deciso di mettermi a sperimentare con la tecnologia che avevo visto di sfuggita dei tag con attributo contenteditable
Gli esperimenti hanno avuto successo, infatti ora mi sono potuto permettere di integrare questo nuovo elemento all'interno della struttura stabile del mio sito ma per arrivarci ho dovuto superare vari piccoli ostacoli che mai avrei immaginato.
Premetto, ho collaudato il tutto solamente su Chrome, visto che ho sviluppato questo componente solo per me non mi sono preoccupato di garantire la compatibilità ad altri browser
l'oggetto Range:
L'oggetto Range è il modo con cui il browser permette di farti sapere dove si trova il cursore, ha 4 campi, due sono nodi e due sono posizioni all'interno del nodo. Sembra complicato ma alla fine non lo è poi tanto.
Un tag html all'interno del DOM viene rappresentato come un oggetto ed è sempre un oggetto anche il testo tra un tag e l'altro. Per cui la prima fase è stata capire come spostarsi all'interno del DOM per sapere come modificarne la struttura. Volevo infatti ottenere che digitando un tag, alla pressione del tasto [>], la procedura isolasse l'etichetta e me la trasformasse in elemento del DOM nella posizione corretta.
La prima difficoltà è stata notare che, una volta inseriti con successo i nodi convertiti, il cursore si posizionava nel posto sbagliato. Cercando sulla rete come correggere la situazione, ho trovato un riferimento ad un carattere. Stupendo, mi ha risolto anche un secondo problema. Il carattere ​ rappresenta un carattere spazio senza dimensione che viene considerato come carattere e non come spazio. Questo fa sì che assicuri la presenza di un campo di testo all'interno dei nodi anche se apparentemente vuoti. Usando questo carattere dopo l'inserimento di ogni nodo, ho risolto anche un secondo problema, la gestione del ritorno a capo.
Chrome inserisce infatti automaticamente un secondo BR se il cursore è all'ultima riga all'interno del nodo, ma ne inserisce uno solo se c'è almeno un carattere dopo il ritorno a capo
Potrei scrivere per ore su tutti i trucchi che ho trovato ma per ora mi limito a mostrarti il componente che ho reso facilmente usabile come plugin per jquery.
Immaginando di avere inserito una DIV nel documento, con ID='myeditor', il codice per fare partire lo script è semplicemente
Lo script è sufficientemente potente da poter permettere la gestione di motori di parser differenti a seconda della zona. Per esempio, per scrivere le istruzioni javascript non faccio creare i tag sintattici BR.
Se ti interessa l'argomento puoi scrivermi alla casella del sito
Sfortunatamente l'approccio di scrivere etichette HTML all'interno di un campo di testo può produrre molto facilmente errori, basta infatti poco, in un testo pieno di frasi e di stili, per perdere di vista una parentesi angolare e non chiudere correttamente un tag, Nella struttura di codici di questo sito, uso infatti un filtro XSLT per produrre la formattazione finale da mostrare agli utenti.
Nel creare la struttura visiva del sito, per inserire le immagini all'interno degli articoli, ho ideato da tempo un codice di template che poi il server trasforma nel tag IMG opportuno per mostrare la fotografia che ho scelto. Diventa scomodo però editare gli articoli con questi tag e non avere la certezza di non aver fatto errori fino a quando, salvando il file, non arriva il messaggio di salvataggio corretto. Per questo motivo, ultimamente ho deciso di mettermi a sperimentare con la tecnologia che avevo visto di sfuggita dei tag con attributo contenteditable
Gli esperimenti hanno avuto successo, infatti ora mi sono potuto permettere di integrare questo nuovo elemento all'interno della struttura stabile del mio sito ma per arrivarci ho dovuto superare vari piccoli ostacoli che mai avrei immaginato.
Premetto, ho collaudato il tutto solamente su Chrome, visto che ho sviluppato questo componente solo per me non mi sono preoccupato di garantire la compatibilità ad altri browser
l'oggetto Range:
L'oggetto Range è il modo con cui il browser permette di farti sapere dove si trova il cursore, ha 4 campi, due sono nodi e due sono posizioni all'interno del nodo. Sembra complicato ma alla fine non lo è poi tanto.
Un tag html all'interno del DOM viene rappresentato come un oggetto ed è sempre un oggetto anche il testo tra un tag e l'altro. Per cui la prima fase è stata capire come spostarsi all'interno del DOM per sapere come modificarne la struttura. Volevo infatti ottenere che digitando un tag, alla pressione del tasto [>], la procedura isolasse l'etichetta e me la trasformasse in elemento del DOM nella posizione corretta.
Range.startContainer,
Range.startOffset,
Range.endContainer,
Range.endOffset
Range.startOffset,
Range.endContainer,
Range.endOffset
La prima difficoltà è stata notare che, una volta inseriti con successo i nodi convertiti, il cursore si posizionava nel posto sbagliato. Cercando sulla rete come correggere la situazione, ho trovato un riferimento ad un carattere. Stupendo, mi ha risolto anche un secondo problema. Il carattere ​ rappresenta un carattere spazio senza dimensione che viene considerato come carattere e non come spazio. Questo fa sì che assicuri la presenza di un campo di testo all'interno dei nodi anche se apparentemente vuoti. Usando questo carattere dopo l'inserimento di ogni nodo, ho risolto anche un secondo problema, la gestione del ritorno a capo.
Chrome inserisce infatti automaticamente un secondo BR se il cursore è all'ultima riga all'interno del nodo, ma ne inserisce uno solo se c'è almeno un carattere dopo il ritorno a capo
Potrei scrivere per ore su tutti i trucchi che ho trovato ma per ora mi limito a mostrarti il componente che ho reso facilmente usabile come plugin per jquery.
Prova a scrivere
Immaginando di avere inserito una DIV nel documento, con ID='myeditor', il codice per fare partire lo script è semplicemente
$('#myeditor').tokenizer();
Lo script è sufficientemente potente da poter permettere la gestione di motori di parser differenti a seconda della zona. Per esempio, per scrivere le istruzioni javascript non faccio creare i tag sintattici BR.
Se ti interessa l'argomento puoi scrivermi alla casella del sito
