3.4.1 Editor TinyMce: uso degli stili e comandi disponibili

Descrizione dei principali comandi disponibili nell'editor di default.

Nel CMS Plone i contenuti vengono gestiti direttamente tramite internet browser, non è necessario usare un programma di videoscrittura come MS Word (anzi, in alcuni casi è controindicato).

Alcuni tipi di contenuto (ad esempio Pagina e Notizia) possono contenere del testo formattato (Rich Text), ovvero del testo che include intestazioni, paragrafi, elenchi puntati, corsivo, grassetto, immagini, collegamenti e altro. Per gestire questo testo, è disponibile un editor all'interno del browser, con una barra di comandi simile a quella disponibile in MS Word (anche se notevolmente semplificata).

 

La barra di comandi - I Menu

Rispetto a Plone v. 4 l'Editor TinyMce della versione 5 presenta alcune differenze in particolar modo nell'introduzione di alcuni menu e relativi sotto-menu che raccolgono funzionalità prima associate unicamente alle icone presenti.

Nella sostanza l'Editor potrà operare ora come in precedenza ma dovrà all'inizio prendere confidenza con il percorso da seguire per ritrovare le varie funzionalità.

Appare ora una barra di comandi comprende nella parte superiore alcuni menu (contenenti sotto-menu) e nella parte inferiore una serie di icone per eseguire alcune azioni.

 

 

Modifica

Aprendo il menu modifica si possono eseguire alcune azioni 

  • Indietro: Permette di annullare l'ultima operazione effettuata.
  • Ripeti: Permette di ripristinare l'ultima azione annullata.
    possibili direttamente dalle icone nella barra comandi
  • Taglia: I dati vengono copiati rimuovendoli dalla loro posizione originale e possono essere incollati sulla nuova posizione. I dati tagliati rimangono disponibili finchè non sovrascritti da altro comando copia o taglia. Alternativamente si può utilizzare la combinazione di tasti ctrl+x.
  • Copia: I dati vengono copiati mantenendo la loro posizione originale e possono essere incollati sulla nuova posizione. I dati copiati rimangono disponibili finchè non sovrascritti da altro comando copia o taglia. Alternativamente si può utilizzare la combinazione di tasti ctrl+c.
  • Incolla: I dati tagliati o copiati vengono incollati nella nuova posizione scelta. Alternativamente si può utilizzare la combinazione di tasti ctrl+v.
  • Incolla solo testo: I dati tagliati o copiati vengono incollati nella nuova posizione scelta mantenendone solo il testo e non la formattazione. 
    possibili direttamente dalle icone nella barra comandi

 

Per poter eseguire i comandi Taglia e Copia è necessario selezionare la parte di testo o il paragrafo attraverso il mouse.
Per selezionare una parola si preme due volte, tre volte per selezionare l’intero paragrafo.

 

  • Trova e sostituisci: E' possibile ricercare una parola o una frase nel testo ed indicare un testo con il quale effettuare la sostituzione. Utilizzando appositi checkbox si può procedere con la ricerca di parole minuscole/maiuscole e parole sbagliate.
  • Seleziona tutto: Viene selezionato tutto il testo comprese eventuali immagini presenti

 

Tabella

 

Tabella: Con questo comando è possibile inserire una nuova tabella scegliendo il numero di righe e il numero di colonne.

La nuova tabella viene creata nel testo e può essere modificata grazie alle icone che compaiono in testa alla tabella e che possono anche essere richiamate da alcuni sotto-menu (riga, colonna).

I comandi richiamati operano sulle selezioni effettuate oppure sulla riga, colonna e tabella sulla quale è stato posizionato il cursore.


Nell'ordine sono:

Proprietà tabella: Permette di impostare larghezza/altezza fisse delle celle, di scegliere l'allineamento del testo.

Cancella tabella: Selezionando la tabella desiderata questo comando opera la sua cancellazione.

Comandi presenti anche nel sotto-menu Riga

Inserisci una riga prima: Selezionata una riga (o semplicemente posizionato il cursore), viene inserita una nuova riga prima (sopra).

Inserisci una riga dopo:  Selezionata una riga (o semplicemente posizionato il cursore), viene inserita una nuova riga dopo (sotto).

Cancella riga: Viene cancellata la riga selezionata (o sulla quale è posizionato il cursore).

Comandi presenti anche nel sotto-menu Colonna

Inserisci una colonna prima: Selezionata una colonna, è possibile crearne una prima (a sinistra).

Inserisci una colonna dopo: Selezionata una colonna, è possibile crearne una dopo (a destra).

Cancella colonna: Viene cancellata la colonna selezionata (o sulla quale è posizionato il cursore).

 

Una volta creata la tabella è possibile inoltre modificarne lo stile dal menù "stili".

 

Formattazioni

Questo menu con relativi sotto-menu consente di applicare al testo diverse formattazioni presenti in Plone v. 4 nella tendina Stile

Queste possono essere applicate al testo in linea o al testo nel paragrafo; ad esempio:

  • il pulsante  (Grassetto) agisce sul testo in linea, e quindi bisogna selezionare a quali caratteri va applicato e premere il pulsante;
  • il pulsante  (Sposta verso l'interno) agisce sul testo nel paragrafo: è sufficiente posizionare il cursore nel paragrafo e premere il pulsante.

Nota: i paragrafi sono creati automaticamente ogni volta che si preme sulla tastiera del PC il tasto INVIO; se si vuole andare a capo rimanendo nello stesso paragrafo, premere MAIUSC + INVIO.

 

Si vedano in dettaglio i sotto-menu con le opzioni presenti.

Intestazioni

Consente di applicare al testo selezionato lo Stile

  • Intestazione 1 (Titolo): il testo viene trasformato in titolo di secondo livello rispetto al titolo della pagina stessa;
  • Intestazione 2 (Sottotitolo): il testo viene trasformato in sottotitolo, ossia un titolo di terzo livello;

Blocco:

  • Evidenza: il testo viene evidenziato con una cornice per metterlo in evidenza;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.

  • Preformattato:
"Preformattato": usa un carattere a spaziatura fissa (normalmente i caratteri invece hanno spaziatura diversa, ad esempio il carattere "O" occupa più spazio rispetto al carattere: "I"), utile per riportare testi disposti su più colonne. Ad esempio:
+-----------------+
| Chrome | 50% |
| IExplorer | 15% |
| Firefox   | 14% |
| Safari | 9% |
+-----------------+

Nota (testo piccolo): il testo selezionato viene visualizzato come pedice
Lorem ipsum dolor sin amet, consecutur adipiscing elit.

Inlinea:

Attributi

1 Grassetto Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.
2 Corsivo Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.
3 Sottolineato

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.

4 Barrato Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.
5 Apice Lorem ipsum dolor sit amet, consectetur adipiscing elit
Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.
6 Pedice Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.
7 Cancella formattazione

 

Allineamento

Posizionamento

1 Testo a sinistra

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.

2 Testo centrato Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.
3 Testo a destra

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.

 

Tabelle

 

Griglia leggera responsive
Griglia leggera responsive senza titolo

 

La barra di comandi - Le icone

 

 

  • Indietro: Permette di annullare l'ultima operazione effettuata.

    Ripeti: Permette di ripristinare l'ultima azione annullata.
    Grassetto Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.
    Corsivo Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.

    Testo a sinistra

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.
    Testo centrato Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.
    Testo a destra Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.


Liste

Con questi stili è possibile modificare gli elenchi una volta selezionati.

  • Elenco puntato: vi sono 3 diversi stili disponibili

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

  • Elenco numerato: vi sono 5 diversi stili disponibili

 

 

                        Elenco puntato e numerato

                        Utilizzando questa funzionalità si possono creare liste formate da paragrafi/parole singole; ogni voce dell'elenco inizia con un simbolo (che può essere modificato dal menù "stili"), e il testo della voce inizia sempre a una distanza fissata automaticamente dal simbolo. Esistono due tipologie di elenchi in base alla necessità o meno di creare una lista ordinata:

                        1 elenco puntato
                        • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        • Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.
                        • Quisque posuere maximus ipsum, non tristique sapien luctus sit amet.
                          2 elenco numerato
                            1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            2. Aliquam semper scelerisque lacus, et semper nibh dapibus vitae.
                            3. Quisque posuere maximus ipsum, non tristique sapien luctus sit amet.

                               

                              Rientro paragrafo

                              1 - Sposta verso l'esterno: Permette di diminuire il rientro del testo rispetto al margine esterno. Ad ogni clic sul comando, in blocco il paragrafo di testo si sposterà dalla posizione originalefino alla posizione desiderata.

                              2 - Sposta verso l'interno: Permette di aumentare il rientro del testo rispetto al margine esterno. Ad ogni clic sul comando, in blocco il paragrafo di testo si sposterà dal margine sinistro fino alla posizione desiderata.

                               

                              Inserisci elementi

                              (work in progress.........aggiornare con la versione Plone 5)

                               

                              Immagine

                              L'icona inserisci/modifica immagine permette di inserire un'immagine direttamente nella pagina di testo. La schermata che appare è questa:



                              Seguendo i passaggi verrà inserita un'immagine nella pagina: è importante inserire tutte le immagini caricate in "immagini allegate" ed assegnarne un titolo semplice ed identificativo. Una volta premuto il pulsante "carica" si potrà scegliere la posizione e la dimensione dell'immagine da inserire (funzione che rimarrà possibile anche una volta che l'immagine è già stata caricata).

                              Collegamento

                              Con questa funzione è possibile creare un collegamento, a cui si verrà indirizzati ogni qual volta si cliccherà sul testo o la parola da visualizzare come collegamento ipertestuale. Una volta selezionato l'elemento, nella barra degli strumenti cliccare su "inserisci/modifica collegamento" e si aprirà la seguente schermata da cui scegliere il tipo di collegamento:



                              Nel box contrassegnato dal numero 1 è possibile scegliere il tipo di collegamento desiderato (sito di ateneo, collegamento a sito esterno, e-mail o ancora all'interno della pagina stessa), mentre nel box numero 2 contestualmente al tipo di collegamento scelto è possibile selezionare la pagina desiderata o inserire l'URL del sito web esterno/mail. Ad esempio se scegliamo il collegamento "esterno" avremo questa situazione:



                              Nel campo "url collegamento" dovrà essere inserito l'url del sito web con il corretto protocollo mentre nel box "anteprima" viene visualizzato il sito web scelto.
                              Per eliminare un collegamento creato basterà selezionarlo e cliccare "togli collegamento" .

                              Ancora

                              E' utilizzata per creare un punto di ancoraggio all'interno del testo (ad esempio inserendo l'ancora alle note in fondo al testo). Utilizzando poi la funzione "Inserisci collegamento" alla frase o testo alla quale si vuole rimandare al punto di ancoraggio, viene creato un collegamento all'interno della pagina stessa che, se cliccato, porta al punto specifico del documento (nel nostro esempio alla nota in fondo al testo). E' da utilizzare quando si ha una pagina molto lunga e ricca di contenuti, per agevolare la navigazione degli utenti. Un esempio può essere visualizzato al capitolo 8.3 del manuale editor.

                               

                              Stili

                              In base alla porzione del testo a cui si desidera applicare uno stile, nel menu a tendina vengono riportate le varie opzioni disponibili; sono così divise:

                              Paragrafo

                              Gli stili "testo" (detti anche "block" o "paragrafo") si applicano al paragrafo in cui si trova il cursore (quindi non serve selezionare alcun testo):

                              • Paragrafo normale: non viene applicato nessuno stile al testo;
                              • Cancella: rimuove gli stili impostati;
                              • Espandibile chiuso/espandibile aperto: è formato da due parti, l'input (una parola o una frase) espandibile e da un riquadro rosso tratteggiato che contiene il testo che viene visualizzato.


                                Il testo chiuso/aperto è cosi visualizzato:


                              • Solo smartphone/solo pc: con questi due stili è possibile creare porzioni di testo visibili unicamente da smartphone o da pc.

                               

                              Selezione

                              Gli stili "selezione" (detti anche: "inline") si applicano al testo selezionato:

                              • Evidenzia: il testo selezionato viene evidenziato con il colore giallo
                              • Lorem ipsum dolor sin amet, consecutur adipiscing elit.