Nuovo editor: WYSIWYG

Da Niko il Sab 22 Giu 2013 - 15:31

Nuovo editor: WYSIWYG

Ciao forumattivo,

con il nuovo editor molte cose sono cambiate e con questo topic guida vogliamo spiegarvi per bene le nuove funzioni del sistema di scrittura :bene:

1. Development:

WYSIWYG è l'acronimo di "What You See Is What You Get". "Quello che vedi è quello che ottieni"applicato all'editor di testo "HTML" ci darà un anteprima di ciò che scriviamo allegando Il testo, colori, grassetto, e-mail, foto ... Fornendoci il risultato del lavoro.

2. Presentazione

"Editor Esteso"

"Editor in risposta rapida"

3. Come funziona?

Il sistema WYSIWYG si suddivide in due modalità

Una modalità WYSIWYG, che mostra il contenuto come dovrebbe essere poi inviato e visualizzato

Una visualizzazione in BBcode (come la conosciamo fin'ora)

Si cambia da un formato ad un altro con l'ultimo pulsante della serie!

Una funzione predefinita in modalità WYSIWYG (esempio con il pulsante grassetto è necessario fare clic prima di scrivere)

Una funzione in "codice sorgente" che visualizza il codice (BBcode e html)

4. I pulsanti BBcode

Icone	Modalità WYSIWYG	Modalità Codice Sorgente
	Il testo in grassetto	Codice: Codice: `[b] [/b]`
	Mettere il testo in corsivo	Codice: Codice: `[i] [/ i]`
	Sottolineare il testo	Codice: Codice: `[u] [/u]`
	Testo allineato	Codice: Codice: `[strike] [/strike]`
	Allinea il testo a sinistra	Codice: Codice: `[left] [/left]`
	Testo Centro	Codice: Codice: `[center][/center]`
	Allineare il testo a destra	Codice: Codice: `[right][/right]`
	Giustificare il testo	Codice: Codice: `[justify] [/justify]`
	Fare un elenco (non numerato)	Codice: Codice: `[list] [*] [/list]`
	Fate una lista numerata	Codice: Codice: `[list=1] [*] [/list]`
	Inserire una linea di separazione (in orizzontale)	Codice: Codice: `[hr]`
	Fai citare o quotare qualcuno (citazione)	Codice: Codice: `[quote] [/quote]`
	Consente di mettere codici (HTML, CSS, ...)	Codice: Codice: `[code] [/code]`
	Mette unisce Spoiler	Codice: Codice: `[spoiler] [/spoiler]`
	Nascondi il testo	Codice: Codice: `[ hide ] [/ hide ]`
	Consente di inserire una tabella, selezionare il numero di righe e colonne.	Codice: Codice: `[ table ] [ tr ] [ td ] [/ td ] [/ tr ] [/ table ]`
	Permette di caricare un'immagine direttamente a un servizio di hosting	-
	Inserisci un'immagine utilizzando l'indirizzo URL di questo	Codice: Codice: `[ img ] [/ img ]`
	Inserire un link che punta la direzione e il testo da indicare	Codice: Codice: `[ url ] [/ url ]`
	Inserire un video di youtube	Codice: Codice: `[ youtube ] [/ youtube ]`
	Inserire un video di Dailymotion	Codice: Codice: `[ dailymotion ] [/ dailymotion ]`
	Inserire contenuti Flash direzione di puntamento del file SWF	Codice: Codice: `[ Flash ( x , e )] [/ flash ]`
	Consente di modificare la dimensione del testo	Codice: Codice: `[ size ] [/ size ]`
	Consente di modificare il colore del testo	Codice: Codice: `[ Colore ] [/ colore ]`
	Consente di modificare il tipo di carattere o lo stile del testo	Codice: Codice: `[ font ] [/ font ]`
	Consente di rimuovere tutti gli stili (colore, grassetto, ...) nel testo selezionato	-
	Mostra / nascondi più pulsanti
	Pedice	Codice: Codice: `[ sub ] [/ sub ]`
	Apice	Codice: Codice: `[ sup ] [/ sup ]`
	Scorrimento	Codice: Codice: `[ scroll ] [/ scorrere ]`
	Spostamento verticale	Codice: Codice: `[ updown ] [/ updown ]`
	Codice di Embed WOW	Codice: Codice: `[ wow ] [/ wow ]`
	Codice Aelatorio	Codice: Codice: `[ rand ] [/ rand ]`
	Lancio dei dad (solo se attivo)	Codice: Codice: `[ roll ] [/roll]`
	Smilies	-
	Inserisci data corrente	-
	Inserire l'ora corrente	-
	Inserire il testo normale	-
	Cambio della modalità WYSIWYG/Source mode	-

5. Funzioni aggiuntive

Si può mettere il nick dell'autore in una citazione e modificare l'immagine che si desidera

Spoiler nella barra di modifica

Quando si inserisce un'immagine è possibile scegliere la larghezza e l'altezza

Quando si inserisce un URL è possibile inserire una descrizione

È possibile scegliere un sacco di nuovi colori

Facendo clic sui pulsanti "Altri" altri pulsanti appaiono e scompaiono

È possibile aggiungere la data e l'ora del momento

È possibile copiare il testo da una parola o di altra pagina del sito e incolla senza formattare

6. Nel pannello di amministrazione

Abbiamo sviluppato il nuovo editor solo nella parte esterna (forum), per ora. Naturalmente lo faremo al più presto anche all'interna PA, ma non funziona con il browser Chrome

Cordiali saluti,
Team Forumattivo :zen:

Tutorial creato da: Staff tecnico/PRO
Copyrigth FORUMATTIVO.COM