L’editor Rich Text (RTE) offre agli autori un’ampia gamma di funzionalità per la modifica del contenuto testuale. Le icone, le caselle di selezione, la barra degli strumenti e i menu sono disponibili per un’esperienza di modifica del testo WYSIWYG.
Per informazioni sull’utilizzo delle funzioni RTE per la creazione, vedere Utilizzare l’editor Rich Text per la creazione. L’editor Rich Text può essere configurato per abilitare, disabilitare ed estendere le funzioni disponibili nei componenti di authoring. Il seguente flusso di lavoro illustra un ordine consigliato per completare le attività di configurazione dell’editor Rich Text in Experience Manager.
Figura: Sequenza di passaggi per apprendere come configurare l’editor Rich Text
L’interfaccia touch è l’interfaccia utente standard per Experience Manager. Adobe è stata introdotta l'interfaccia touch con responsive design per l'ambiente di authoring. L’interfaccia touch è stata progettata per i dispositivi touch e desktop. L’interfaccia è molto diversa dall’interfaccia classica originale.
Figura: Barra degli strumenti Editor Rich Text nell’interfaccia touch
Figura: Barra degli strumenti Editor Rich Text nell’interfaccia classica
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 | Interfaccia touch | Interfaccia classica |
---|---|---|---|---|
In linea | Modifica diretta per modifiche rapide e secondarie; Formato senza aprire una finestra di dialogo | Funzioni RTE minime | Y | Y |
Schermo intero RTE | Copertina intera pagina | Tutte le funzioni RTE richieste | Y | N |
Finestra di dialogo | Finestra di dialogo sopra al contenuto della pagina, ma non copre l’intera pagina | Tutte le funzioni RTE richieste nell’interfaccia classica; abilitare le funzionalità in modo prudente nell'interfaccia utente touch | Y | Y |
Finestra di dialogo a schermo intero | Come modalità a schermo intero; contiene i campi del dialogo accanto all’editor Rich Text | Tutte le funzioni RTE richieste | Y | N |
La funzione di modifica sorgente non è disponibile in modalità di modifica in linea nell’interfaccia touch. Non è possibile trascinare le immagini in modalità schermo intero. Tutte le altre funzioni funzionano in tutte le modalità.
Quando il contenuto viene aperto (con un doppio tocco o clic lento), è possibile modificarlo all’interno della pagina. Viene visualizzata una barra degli strumenti compatta con opzioni molto semplici.
Figura: Modifica in linea con la barra degli strumenti di base nell’interfaccia touch
Nell’interfaccia classica, un doppio clic lento sul componente consente la modifica in linea e un contorno arancione evidenzia il contenuto. Se Content Finder è aperto, nella parte superiore della finestra viene visualizzata una barra degli strumenti con le opzioni di formattazione RTE disponibili. Se Content Finder non è aperto, le opzioni di formattazione non vengono visualizzate e potete eseguire solo modifiche di testo di base.
componenti di Experience Manager possono essere aperti a schermo intero per nascondere il contenuto della pagina e occupare lo schermo 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. Per aprirlo, fare clic su nella 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 dettagliata dell’editor Rich Text per la modifica in modalità a schermo intero nell’interfaccia touch
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 a più colonne e l’area disponibile per la finestra di dialogo è minore.
Figura: Modalità di modifica finestra di dialogo nell’interfaccia touch
Figura: Finestra di dialogo nell’interfaccia classica che contiene una barra degli strumenti dettagliata per la modifica
La funzionalità è disponibile tramite una serie di plug-in, ognuno dei quali è dotato di:
Una proprietà features
:
Se del caso, ulteriori proprietà e opzioni che 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-plintext paste-wordhtml | Tagliare, copiare e incollare le tre modalità. |
punto | trova sostituzione | Trova e sostituisci. |
format | grassetto sottolineato in corsivo | Formattazione di base del testo. |
immagine | immagine | 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 righright | Allineamento del paragrafo. |
links | ancoraggio di scollegamento modifica collegamento | Collegamenti ipertestuali e ancoraggi. |
list | rientro ordinato e non ordinato | 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 intero intervallo di caratteri speciali se si desidera definire il 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 | stili | 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 | pedice | Estensioni ai formati di base, aggiunta di script secondari e super. |
tabella | tabella amovibile insertrow removerow insertcolumn removecolumn cellprop ungecells splitcell seltrow seltrow selectColumns | Vedere configurare gli stili di tabella, se si desidera aggiungere stili personalizzati per intere tabelle o singole celle. |
annulla | annullamento ripristino | 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 utente) fornita dagli autori determina la posizione dei dettagli di configurazione quando si attivano i plug-in dell'editor Rich Text](/docs/experience-manager-65/administering/operations/configure-rich-text-editor-plug-ins.html?lang=it#activateplugin):[
Modalità di modifica | Posizione per l’interfaccia utente touch | Posizione per l’interfaccia classica |
---|---|---|
In linea | cq:editConfig/cq:inplaceEditing |
cq:editConfig/cq:inplaceEditing |
Schermo intero | cq:editConfig/cq:inplaceEditing |
Non applicabile |
Finestra di dialogo | cq:dialog |
dialog |
Finestra di dialogo a schermo intero | cq:dialog |
Non applicabile |
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
.
Configura le seguenti proprietà che si applicano in modalità di modifica finestra di dialogo solo nell’interfaccia utente touch:
useFixedInlineToolbar
: Impostate questa proprietà booleana definita sul nodo RTE (uno con sling:resourceType= cq/gui/components/authoring/dialog/richtext
) su True
, affinché la barra degli strumenti RTE sia fissa invece che mobile.
Quando questa proprietà è true, per impostazione predefinita la modifica Richtext viene avviata in corrispondenza dell'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. Quando questa proprietà è 'true', il comportamento predefinito, con inizio clic, non funziona.
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. Questo funziona solo se customStart
è stato impostato su true.
Quando l’editor Rich Text viene utilizzato nella finestra di dialogo con attivazione touch, per evitare problemi è necessario impostare la proprietà useFixedInlineToolbar
su true.
Potete definire il selettore HTML che verrà avviato dall'editor di testo configurando le seguenti proprietà:
editElementQuery
- Definita in cq:InplaceEditingConfig
, questa proprietà viene utilizzata per specificare un selettore dell'elemento HTML sul quale verrà avviata la modifica in linea per il componente Testo. Se non viene specificato, la modifica in linea viene avviata direttamente sul componente di testo HTML.textPropertyName
- Definita in cq:InplaceEditingConfig
, questa proprietà viene utilizzata per specificare il nome della proprietà che verrà salvata nel nodo di contenuto in cui il valore HTML del componente di testo verrà mantenuto dopo la modifica in linea.La proprietà corrispondente per la modalità finestra di dialogo è name
.
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.
Esempio: Scarica questo esempio di configurazione che illustra come configurare l’editor Rich Text. In questo pacchetto tutte le funzioni sono abilitate.
Il componente di testo Componenti di base consente agli editor modelli di configurare molti plug-in RTE in un'interfaccia utente grafica 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 la sezione Impostazioni dell'interfaccia utente RTE e criteri di contenuto di questo documento, nonché Creazione di 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.
AEM 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à della barra degli strumenti viene utilizzata per specificare i pulsanti della barra degli strumenti.
Ad esempio, se il pulsante è di per sé una funzione (ad esempio, Bold
), viene specificato come PluginName#FeatureName
(ad esempio, links#modifylink
).
Se il pulsante è un contenitore (contenente alcune caratteristiche di un plug-in), viene specificato come #PluginName
(ad esempio, #format
).
I separatori (|
) tra un gruppo di pulsanti possono essere specificati con -
.
Il nodo a comparsa nella modalità in linea o a schermo intero contiene un elenco dei popovers utilizzati. Ogni nodo figlio sotto il nodo 'popovers' ha un nome 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 Grassetto 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>
In una pagina, è possibile includere la clientlib dell’editor Rich Text CoralUI 2 o la clientlib dell’editor Rich Text CoralUI 3. Per impostazione predefinita, l’editor Rich Text include la clientlib dell’editor Rich Text CoralUI 3. Per passare all’editor Rich Text CoralUI 2, effettuare le seguenti operazioni.
Adobe non lo consiglia come procedura ottimale. Passate all’editor Rich Text CoralUI 2 come ultima risorsa. I plug-in personalizzati per l’editor Rich Text CoralUI 2 funzionano con l’editor Rich Text CoralUI 3 se i plug-in non dipendono da elementi interni dell’editor Rich Text, ad esempio le classi.
Se utilizzate plug-in personalizzati per l'editor Rich Text CoralUI3, utilizzate la libreria rte.coralui3
.
Sovrapporre il nodo /libs/cq/gui/components/authoring/editors/clientlibs/core
in /apps
ed effettuare le seguenti operazioni:
rte.coralui3
con rte.coralui2
per la proprietà dependencies.cq.authoring.editor.core.inlineediting.rte.coralui3
con cq.authoring.editor.core.inlineediting.rte.coralui2
per la proprietà embed.cq.authoring.rte.coralui3
con cq.authoring.rte.coralui2
per la proprietà embed.Sovrapporre i nodi /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3
e /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2
in /apps
.
Rimuovere la categoria cq.authoring.dialog
da /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3
e aggiungerla a /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2
.
Modificare qualsiasi altra dipendenza che viene inclusa nella pagina da rte.coralui3
a rte.coralui2
. Ad esempio, dopo aver sovrapposto il nodo /libs/mcm/campaign/components/touch-ui/clientlibs/rte
in /apps
, modificare qualsiasi dipendenza da esso da rte.coralui3
a rte.coralui2
.
Sovrapporre il nodo cq/ui/widgets
in /apps
. Sostituire la dipendenza cq.rte
nel nodo /apps/cq/ui/widgets
con cq.coralui2.rte
.
L’editor Rich Text CoralUI 2 utilizza modelli handlebars per le finestre di dialogo dei plug-in. Di conseguenza, la clientlib dell’editor Rich Text CoralUI 2 presentava una dipendenza dalla clientlib handlebars. L’editor Rich Text CoralUI 3 non utilizza modelli handlebars e non ha alcuna dipendenza associata. Se i plug-in personalizzati utilizzano modelli handlebars, includi la clientlib handlebars nella pagina Web.
Per ulteriori informazioni sulla configurazione dell'editor Rich Text, vedere il riferimento AEM Widget API.
In particolare, per visualizzare i plug-in e le relative opzioni disponibili:
Il componente CQ.form.RichText fornisce un campo modulo per la modifica delle informazioni di testo formattate (RTF). Per conoscere tutti i parametri disponibili per il modulo RTF, vedere Opzioni di configurazione.
Il componente RichText fornisce un'ampia gamma di funzionalità utilizzando i plug-in elencati in CQ.form.rte.plugins.Plugin. Per ciascun plug-in:
Sono inoltre disponibili ulteriori informazioni sulle regole HTML per i collegamenti.
che possono essere utilizzati per estendere e personalizzare l’editor Rich Text. Ad esempio, per elencare gli ancoraggi disponibili nella pagina durante la creazione di un collegamento, è possibile fornire la propria implementazione di LinkPlugin
.
AEM funzionalità RTE presenta le seguenti limitazioni:
Le funzionalità RTE sono supportate solo nelle finestre di dialogo AEM componente. L'editor Rich Text non è supportato nelle procedure guidate o nei moduli di base come Proprietà pagina e Scaffolding nell'interfaccia touch.
AEM non funziona su 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 la cornice in linea o l’iframe per incorporare il contenuto.
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
.Come selezionare più celle di tabella?
Per selezionare più celle in una tabella, premere il tasto Ctrl
o Cmd
, quindi fare clic sulle celle della tabella uno per uno.
A questo punto, eseguire un'operazione sulla selezione, ad esempio impostare le proprietà delle celle selezionate.
I collegamenti ipertestuali si perdono quando si modifica un componente utilizzando il pulsante Configura
Aggiungete un collegamento ipertestuale in un componente di testo modificandolo utilizzando il pulsante Configura. Se si modifica nuovamente il collegamento ipertestuale e si convalida il collegamento ipertestuale per la seconda volta, il collegamento potrebbe perdere il collegamento.
Una soluzione consiste nel fare clic nel componente di testo quando la finestra di dialogo di modifica viene visualizzata una seconda volta ed eseguire la convalida del collegamento.
Questo problema è stato risolto in AEM 6.3 e versioni successive.
Il contenuto HTML aggiunto in modalità di modifica del codice sorgente viene perso
Non aggiungete un codice HTML personalizzato con XSS. AEM, e non l’editor Rich Text, può rimuovere alcuni contenuti HTML per aderire alle regole antisometriche XSS.
Per verificare che l’HTML incollato sia salvato, controllate il contenuto salvato in CRXDE (nel nodo del contenuto).
Se non viene salvato, l’HTML deve essere stato rimosso dall’editor Rich Text in quanto non rispettava le regole dell’editor Rich Text.
Se viene salvato in CRXDE ma non viene eseguito il rendering sulla pagina (per verificare il rendering, vedere l'anteprima della pagina preview, viene rimossa dalle regole AEM XSS.
Il componente multicampo non funziona come previsto
Per creare un componente multicampo, utilizzate esclusivamente CoralUI 3. Non utilizzate le finestre di dialogo dei componenti CoralUI 2.
Inoltre, verifica che il codice di implementazione multicampo e la struttura del nodo siano corretti.
La configurazione disponibile per gli amministratori non è disponibile per gli autori
Se gli aggiornamenti delle configurazioni dell'interfaccia vengono riportati per gli amministratori ma non per gli account di creazione, accertatevi che il nodo di configurazione non sia denominato config
. Utilizzare la proprietà configPath
.