Nuovo editor: WYSIWYG


Attenzione Nuovo editor: WYSIWYG

Messaggio 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à WYSIWYGModalità Codice Sorgente 
Il testo in grassetto 
Codice:
Codice:
[b] [/b]
Mettere il testo in corsivoCodice:
Codice:
[i] [/ i]
Sottolineare il testoCodice:
Codice:
[u] [/u]
Testo allineatoCodice:
Codice:
[strike] [/strike]
Allinea il testo a sinistraCodice:
Codice:
[left] [/left]
Testo CentroCodice:
Codice:
[center][/center]
Allineare il testo a destraCodice:
Codice:
[right][/right]
Giustificare il testoCodice:
Codice:
[justify] [/justify]
Fare un elenco (non numerato)Codice:
Codice:

[list]
[*]
[/list]
Fate una lista numerataCodice:
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 SpoilerCodice:
Codice:
[spoiler] [/spoiler]
Nascondi il testoCodice:
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 questoCodice:
Codice:
[ img ] [/ img ]
Inserire un link che punta la direzione e il testo da indicareCodice:
Codice:
[ url ] [/ url ]
Inserire un video di youtube 
Codice:
Codice:
[ youtube ] [/ youtube ]
Inserire un video di DailymotionCodice:
Codice:
[ dailymotion ] [/ dailymotion ]
Inserire contenuti Flash direzione di puntamento del file SWFCodice:
Codice:
[ Flash ( x , e )] [/ flash ]
Consente di modificare la dimensione del testoCodice:
Codice:
[ size ] [/ size ]
Consente di modificare il colore del testoCodice:
Codice:
[ Colore ] [/ colore ]
Consente di modificare il tipo di carattere o lo stile del testoCodice:
Codice:
[ font ] [/ font ]
Consente di rimuovere tutti gli stili (colore, grassetto, ...)
nel testo selezionato
-
Mostra / nascondi più pulsanti
PediceCodice:
Codice:
[ sub ] [/ sub ]
ApiceCodice:
Codice:
[ sup ] [/ sup ]
ScorrimentoCodice:
Codice:
[ scroll ] [/ scorrere ]
Spostamento verticaleCodice:
Codice:
[ updown ] [/ updown ]
Codice di Embed WOWCodice:
Codice:
[ wow ] [/ wow ]
Codice AelatorioCodice:
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
avatar
Niko
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum