L’editor Rich Text (RTE) offre agli autori un’ampia gamma di funzionalità per la modifica del contenuto di testo. Le icone, le caselle di selezione, la barra degli strumenti e i menu sono disponibili per un’esperienza di modifica del testo WYSIWYG. Gli amministratori configurano l’editor Rich Text per attivare, disattivare ed estendere le funzioni disponibili nei componenti di authoring. Scopri in che modo gli autori utilizzano l'editor Rich Text per creare contenuti Web.
I concetti e i passaggi necessari per la configurazione dell’editor Rich Text sono elencati di seguito.
Comprendere i concetti relativi all’editor Rich Text | Abilitare le funzioni richieste | Configurare le singole funzionalità |
---|---|---|
Comprendere l'interfaccia | Comprendere e impostare le posizioni di configurazione | Configurare i plug-in |
Tipi di modalità di modifica | Attivare i plug-in | Impostazione delle proprietà delle funzioni |
Informazioni sui plug-in | Configurare le barre degli strumenti RTE | Configurare le modalità Incolla |
L'interfaccia RTE offre un design reattivo per l'ambiente di authoring. L'interfaccia è progettata per essere utilizzata su dispositivi touch e desktop.
Figura: Barra degli strumenti Editor Rich Text con tutte le opzioni disponibili abilitate.
La barra degli strumenti fornisce le opzioni per l’esperienza di authoring WYSIWYG. Experience Manager gli amministratori possono configurare le opzioni disponibili nella barra degli strumenti dell’interfaccia. Per impostazione predefinita, in Experience Manager è disponibile un set completo di opzioni di modifica. Gli sviluppatori possono personalizzare Experience Manager per aggiungere altre opzioni di modifica.
Gli autori possono creare e modificare contenuti testuali in Experience Manager utilizzando le diverse modalità di componenti. Le opzioni della barra degli strumenti per la creazione e formattazione di contenuti e l’esperienza utente dei componenti abilitati all’editor Rich Text in modalità di modifica diversa variano in base alle configurazioni dell’editor Rich Text.
Modalità di modifica | Area di modifica | Funzioni consigliate da abilitare |
---|---|---|
In linea | Modifica diretta per modifiche rapide e secondarie; Formato senza aprire una finestra di dialogo. | Funzioni RTE minime. |
Schermo intero RTE | Copre l’intera pagina. | Tutte le funzioni RTE richieste. |
Finestra di dialogo | Finestra di dialogo sopra al contenuto della pagina, ma non copre l’intera pagina. | Abilitare le funzionalità in modo appropriato. |
Finestra di dialogo a schermo intero | Come modalità a schermo intero; contiene i campi della finestra di dialogo accanto a RTE. | Tutte le funzioni RTE richieste. |
La funzione di modifica sorgente non è disponibile in modalità di modifica in linea. Non è possibile trascinare le immagini in modalità schermo intero. Tutte le altre funzioni funzionano in tutte le modalità.
Per modificare il contenuto di una pagina, aprite il contenuto con un doppio clic lento . Viene visualizzata una barra degli strumenti compatta con le opzioni di base.
Figura: Modifica in linea con le opzioni di base nella barra degli strumenti.
Experience Manager i componenti possono essere aperti nella visualizzazione a schermo intero che nasconde il contenuto della pagina e occupa la schermata disponibile. Considerate la possibilità di modificare a schermo intero una versione dettagliata dell'editing in linea in quanto offre il maggior numero di opzioni di modifica. È possibile aprirlo facendo clic su , dalla barra degli strumenti compatta quando si utilizza la modalità di modifica in linea.
Nella finestra di dialogo a schermo intero, insieme a una barra degli strumenti dettagliata dell’editor Rich Text, sono disponibili anche le opzioni e i componenti disponibili in una finestra di dialogo. È applicabile solo per una finestra di dialogo che contiene l’editor Rich Text insieme ad altri componenti.
Figura: Barra degli strumenti RTE dettagliata durante la modifica in modalità a schermo intero.
Quando si fa doppio clic su un componente, si apre una finestra di dialogo per la modifica del contenuto. Viene visualizzata la finestra di dialogo sopra la pagina esistente. In alcuni scenari specifici, la finestra di dialogo si apre come finestra a comparsa. Ad esempio, quando un componente Testo fa parte di una colonna in un layout di pagina con più colonne e l’area disponibile per la finestra di dialogo è minore.
Figura: Modalità di modifica finestra di dialogo.
La funzionalità è disponibile tramite una serie di plug-in, ognuno dei quali è dotato di:
Una proprietà features
, ovvero
Se appropriato, più proprietà e opzioni richiedono una configurazione specializzata.
Le funzioni di base dell'editor Rich Text sono attivate o disattivate dal valore della proprietà features
su un nodo specifico del plug-in appropriato.
Nella tabella seguente sono elencati i plug-in correnti, che mostrano:
features
.ID plug-in | funzionalità | Descrizione |
---|---|---|
modifica | cut , copy , paste-default , paste-plaintext , paste-wordhtml |
Tagliare, copiare e incollare le tre modalità. |
punto | find , replace |
Trova e sostituisci. |
format | bold , italic , underline |
Formattazione di base del testo. |
immagine | image |
Supporto per immagini di base (trascinate da Content Finder). A seconda del browser, il supporto ha diversi comportamenti per gli autori |
keys | - | Per definire questo valore, vedere dimensioni scheda. |
justify | justifyleft , justifycenter , justifyright |
Allineamento del paragrafo. |
links | modifylink , unlink , anchor |
Collegamenti ipertestuali e ancoraggi. |
list | ordered , unordered , indent , outdent |
Questo plug-in controlla sia il rientro che gli elenchi; inclusi gli elenchi nidificati. |
cattivi | specialchars , sourceedit |
Gli strumenti vari consentono agli autori di immettere caratteri speciali o modificare l'origine HTML. È inoltre possibile aggiungere un intervallo di caratteri speciali se si desidera definire un proprio elenco. |
Paraformat | paraformat |
I formati di paragrafo predefiniti sono Paragrafo, Intestazione 1, Intestazione 2 e Intestazione 3 (<p> , <h1> , <h2> e <h3> ). È possibile aggiungere altri formati di paragrafo o estendere l'elenco. |
controllo ortografia | checktext |
Controllo ortografia basato sulla lingua |
stili | styles |
Supporto per lo stile con una classe CSS. Aggiungete un nuovo stile di testo se desiderate aggiungere (o estendere) un intervallo personalizzato di stili da usare con il testo. |
pedice | subscript , superscript |
Estensioni nei formati di base, aggiunta di pedice e super-script. |
tabella | table , removetable , insertrow , removerow , insertcolumn , removecolumn , cellprops , mergecells , splitcell , selectrow , selectcolumns |
Vedere configurare gli stili di tabella per aggiungere stili personalizzati per intere tabelle o singole celle. |
annulla | undo , redo |
Dimensione cronologia delle operazioni di annullamento e ripristino annullamento e ripristino. |
Il plug-in a schermo intero non è supportato in modalità finestra di dialogo. Utilizzare l'impostazione dialogFullScreen
per configurare la barra degli strumenti per la modalità a schermo intero.
La modalità di modifica dell'editor Rich Text e l'interfaccia fornita dagli autori determinano la posizione dei dettagli di configurazione quando si stanno attivando i plug-in dell'editor Rich Text](/docs/experience-manager-cloud-service/implementing/configuring-and-extending/configure-rich-text-editor-plug-ins.html?lang=it#activateplugin). [ Le posizioni sono:
cq:editConfig/cq:inplaceEditing
.cq:editConfig/cq:inplaceEditing
.cq:dialog
.cq:dialog
.Non assegnare al nodo il nome cq:inplaceEditing
come config
. Sul nodo cq:inplaceEditing
, definire le seguenti proprietà:
configPath
String
Non assegnare al nodo di configurazione RTE il nome config
. In caso contrario, le configurazioni dell'editor Rich Text hanno effetto solo per gli amministratori e non per gli utenti del gruppo content-author
.
Configurare le seguenti proprietà che si applicano in modalità di modifica finestra di dialogo:
useFixedInlineToolbar
: È possibile impostare la barra degli strumenti dell’editor Rich Text in modo che sia fissa invece di essere mobile. Impostate questa proprietà booleana definita sul nodo RTE con sling:resourceType= cq/gui/components/authoring/dialog/richtext
su True
. Quando questa proprietà è impostata su True
, la modifica RTF viene avviata sull'evento foundation-contentloaded
. Per evitare questo problema, impostare la proprietà customStart
su True
e attivare l'evento rte-start
per avviare la modifica dell'editor Rich Text. Se questa proprietà è true
, l'editor Rich Text non inizia a fare clic e questo è il comportamento predefinito.
customStart
: Impostate questa proprietà booleana definita sul nodo dell'editor Rich Text su True
, per controllare quando avviare l'editor Rich Text attivando l'evento rte-start
.
rte-start
: Attiva questo evento sull’ contenteditable-div
editor Rich Text, quando avviare la modifica dell’editor Rich Text. Funziona solo se customStart
è stato impostato su true
.
Quando l'editor Rich Text viene utilizzato nella finestra di dialogo con abilitazione touch, impostare la proprietà useFixedInlineToolbar
su true
per evitare problemi.
Le funzionalità RTE sono disponibili tramite una serie di plug-in, ognuno dei quali dispone della proprietà features. Potete configurare la proprietà features in modo da attivare o disattivare le varie funzioni di ciascun plug-in.
Per configurazioni dettagliate dei plug-in RTE, vedere come attivare e configurare i plug-in RTE.
Il componente di testo Componenti di base consente agli editor di modelli di configurare molti plug-in RTE utilizzando l'interfaccia utente come criteri di contenuto, eliminando la necessità di una configurazione tecnica. I criteri di contenuto possono funzionare con le configurazioni dell’interfaccia utente RTE come descritto in questo documento. Per ulteriori informazioni, vedere creare modelli di pagina e la documentazione per gli sviluppatori di componenti core.
A scopo di riferimento, i componenti Testo predefiniti (forniti nell’ambito di un’installazione standard) sono disponibili all’indirizzo:
/libs/wcm/foundation/components/text
/libs/foundation/components/text
Per creare un componente di testo personalizzato, copiate il componente sopra anziché modificarlo.
Experience Manager consente di configurare l’interfaccia per l’editor Rich Text in modo diverso per le diverse modalità di modifica. Le impostazioni predefinite sono fornite di seguito. Potete ignorare queste impostazioni predefinite in base alle vostre esigenze. Potete personalizzare solo le funzioni della barra degli strumenti che desiderate fornire agli autori. Non è necessario specificare tutte le configurazioni della barra degli strumenti.
Per configurare la barra degli strumenti per dialogFullScreen
, utilizzate la seguente configurazione di esempio.
<uiSettings jcr:primaryType="nt:unstructured">
<cui jcr:primaryType="nt:unstructured">
<inline
jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
<popovers jcr:primaryType="nt:unstructured">
<justify
jcr:primaryType="nt:unstructured"
items="[justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify]"
ref="justify"/>
<lists
jcr:primaryType="nt:unstructured"
items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
ref="lists"/>
<paraformat
jcr:primaryType="nt:unstructured"
items="paraformat:getFormats:paraformat-pulldown"
ref="paraformat"/>
</popovers>
</inline>
<dialogFullScreen
jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
<popovers jcr:primaryType="nt:unstructured">
<paraformat
jcr:primaryType="nt:unstructured"
items="paraformat:getFormats:paraformat-pulldown"
ref="paraformat"/>
</popovers>
</dialogFullScreen>
<tableEditOptions
jcr:primaryType="nt:unstructured"
toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]">
</tableEditOptions>
</cui>
</uiSettings>
Per la modalità in linea e per la modalità a schermo intero vengono utilizzate diverse impostazioni dell'interfaccia utente. La proprietà toolbar specifica l'opzione della barra degli strumenti.
Ad esempio, se l'opzione è essa stessa una funzione (ad esempio, Bold
), viene specificata come PluginName#FeatureName
(ad esempio, links#modifylink
).
Se l'opzione è un pop-over (contenente alcune caratteristiche di un plug-in), viene specificata come #PluginName
(ad esempio, #format
).
I separatori (|
) tra un gruppo di opzioni possono essere specificati con -
.
Il nodo a comparsa nella modalità in linea o a schermo intero contiene un elenco dei pop-up in uso. Ogni nodo secondario sotto il nodo popovers
viene denominato in base al plug-in (ad esempio, formato). La proprietà 'items' contiene un elenco delle funzioni del plug-in (ad esempio, format#bold).
Gli amministratori possono controllare le opzioni dell'editor Rich Text utilizzando criteri di contenuto, ad esempio anziché eseguire la configurazione come descritto in precedenza. I criteri di contenuto definiscono le proprietà di progettazione di un componente quando viene utilizzato come parte di un modello modificabile. Ad esempio, se un componente di testo che utilizza l’editor Rich Text viene utilizzato con un modello modificabile, il criterio del contenuto può definire la disponibilità dell’opzione grassetto e alcune opzioni di formattazione del paragrafo. I criteri di contenuto sono riutilizzabili e possono essere applicati a più modelli.
Le opzioni disponibili nell’editor Rich Text scorrono a valle dalle configurazioni dell’interfaccia utente ai criteri dei contenuti.
Ad esempio, è possibile consultare la Documentazione del componente di base di testo.
È possibile personalizzare la mappatura tra le icone Corallo visualizzate sulla barra degli strumenti dell’editor Rich Text e i comandi disponibili. Non è possibile utilizzare altre icone oltre alle icone Corallo.
Create un nodo denominato icons
in uiSettings/cui
.
Creare nodi per le singole icone sottostanti.
Su ciascuno dei singoli nodi di icona, specificate un'icona Corallo e un comando da associare all'icona.
Segue uno snippet di esempio per mappare il comando Bold
sull'icona Corallo denominata textItalic
.
<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
<rtePlugins jcr:primaryType="nt:unstructured">
<format jcr:primaryType="nt:unstructured" features="bold,italic"/>
</rtePlugins>
<uiSettings jcr:primaryType="nt:unstructured">
<cui jcr:primaryType="nt:unstructured">
<inline jcr:primaryType="nt:unstructured"
toolbar="[format#bold,format#italic,format#underline,links#modifylink,links#unlink]">
</inline>
<icons jcr:primaryType="nt:unstructured">
<bold jcr:primaryType="nt:unstructured"
command="format#bold"
icon="textItalic"/>
</icons>
</cui>
</uiSettings>
</text>
Experience Manager La funzionalità RTE presenta le seguenti limitazioni:
Le funzionalità RTE sono supportate solo nelle finestre di dialogo dei componenti Experience Manager. L'editor Rich Text non è supportato nelle procedure guidate o nei moduli di base.
Experience Manager non funziona sui dispositivi ibridi.
Non assegnare un nome al nodo di configurazione dell'editor Rich Text config
. In caso contrario, la configurazione dell'editor Rich Text ha effetto solo per gli amministratori e non per gli utenti del gruppo content-author
.
L’editor Rich Text non supporta l’incorporazione di contenuto in una cornice in linea o in un iframe.
Paste
, solo in modalità a schermo intero o a schermo intero. I plug-in con numerosi pop-up necessitano di maggiore spazio sullo schermo per offrire una buona esperienza di authoring.rte.coralui3
.