Show Menu
ARGOMENTI×

Configure the Rich Text Editor

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 sapere come utilizzare le funzioni RTE per la creazione, consulta 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 flusso di lavoro seguente illustra un ordine consigliato per completare le attività di configurazione dell’editor Rich Text in Experience Manager.
Figura: Flusso di lavoro tipico per la configurazione dell’editor Rich Text

Comprendere l’interfaccia touch e l’interfaccia classica

L’interfaccia touch è l’interfaccia standard di AEM. Nella versione 5.6, Adobe ha introdotto l’interfaccia utente touch con design Layout dinamico reattivo per l’ambiente di authoring. L’interfaccia utente touch è progettata per i dispositivi touch e desktop. L’interfaccia utente è 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

Varie modalità di modifica

Gli autori possono creare e modificare contenuti testuali in AEM 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à.

Modifica in linea

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 le opzioni di base.
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.

Full screen editing

I componenti AEM possono essere aperti a schermo intero, in modo da 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. È possibile aprirlo facendo clic su , dalla barra degli strumenti compatta, quando si utilizza la modalità di modifica in linea.
La modalità a schermo intero della finestra di dialogo fornisce una barra degli strumenti dettagliata dell’editor Rich Text, le opzioni e i componenti disponibili in modalità 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

Modifica finestra di dialogo

Quando si fa doppio clic su un componente nell’interfaccia classica, 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

Informazioni sui plug-in RTE e le relative funzioni

La funzionalità è disponibile tramite una serie di plug-in, ognuno dei quali è dotato di:
  • Una features proprietà:
    • che consente di attivare o disattivare le funzionalità di base del plug-in.
    • Può essere configurato utilizzando una procedura standard.
  • Se appropriato, più proprietà e opzioni che richiedono una configurazione specializzata.
Le funzioni di base dell'editor Rich Text sono attivate o disattivate dal valore della features proprietà su un nodo specifico del plug-in appropriato.
Nella tabella seguente sono elencati i plug-in correnti, che mostrano:
  • ID plug-in con un collegamento alla documentazione API. L'ID viene utilizzato come nome del nodo quando si attiva un plug-in .
  • Valori consentiti per la features proprietà.
  • Una descrizione delle funzionalità fornite dal plug-in.
ID plug-in
funzionalità
Descrizione
modifica
cut copy paste-default paste-plintext paste-wordhtml
trova sostituzione
Trova e sostituisci.
grassetto sottolineato in corsivo
Formattazione di base del testo.
immagine
Supporto per immagini di base (trascinate da Content Finder). A seconda del browser, il supporto ha diversi comportamenti per gli autori
Per definire questo valore, vedere Dimensione tabulazione.
justifyleft justifycenter righright
Allineamento del paragrafo.
ancoraggio di scollegamento modifica collegamento
rientro ordinato e non ordinato
Questo plug-in controlla sia i rientri che gli elenchi ; inclusi gli elenchi nidificati.
specialchars sourceedit
Gli strumenti vari consentono agli autori di immettere caratteri Configurare i caratteri speciali speciali o modificare l’origine HTML. Inoltre, potete aggiungere un intero intervallo di caratteri speciali se desiderate definire il vostro elenco.
Paraformat
paraformat
I formati di paragrafo predefiniti sono Paragrafo, Intestazione 1, Intestazione 2 e Intestazione 3 ( <p> , <h1> , <h2> e <h3> ). Potete 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 nuovi stili 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
Per aggiungere stili personalizzati per intere tabelle o singole celle, vedere Configurare gli stili di tabella.
annulla
annullamento ripristino
Dimensione cronologia delle operazioni di annullamento e ripristino .
Il plug-in a schermo intero non è supportato in modalità finestra di dialogo. Utilizzo dell’ dialogFullScreen impostazione per configurare la barra degli strumenti per la modalità a schermo intero.

Comprendere i percorsi e le posizioni di configurazione

La modalità di modifica dell’editor Rich Text (e l’interfaccia utente) fornita per gli autori determina il percorso in cui vengono definiti i dettagli di configurazione quando si attivano i plug-in dell’editor Rich Text:
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 sotto cq:inplaceEditing come config . Sul cq:inplaceEditing nodo, definire le seguenti proprietà:
  • Nome : configPath
  • Tipo : String
  • Valore : percorso del nodo contenente la configurazione effettiva
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, l’impostazione della proprietà useFixedInlineToolbar su true è obbligatoria per evitare problemi.

Personalizzazione della modifica locale

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 .

Abilitare le funzionalità RTE attivando i plug-in

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, consulta come attivare e configurare i plug-in RTE.
Scarica questa configurazione di esempio per apprendere come configurare l’editor Rich Text. In questo pacchetto tutte le funzioni sono abilitate.
Il componente di testo Componenti principali consente agli editor modelli di configurare molti plug-in RTE nell'interfaccia utente come criteri di contenuto, eliminando la necessità di configurare la configurazione tecnica. I criteri di contenuto possono funzionare con le configurazioni dell'interfaccia utente RTE come descritto. Per ulteriori informazioni, consulta le impostazioni dell’interfaccia utente RTE e i criteri di contenuto, Creare modelli di pagina e la documentazione per lo sviluppo dei 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.

Configura RTE, barra degli strumenti

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.
Per una migliore esperienza di authoring:
  • In una finestra di dialogo mobile, abilitate solo i plug-in che non dispongono di un pop-up, poiché la finestra di dialogo mobile ha dimensioni più ridotte.
  • Nella finestra di dialogo a schermo intero, abilitate tutti i plug-in richiesti, anche i plug-in con pop-up più grandi, come il Paste plug-in. Utilizzate la dialogFullScreen configurazione descritta di seguito.
<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]"
          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,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 è esso stesso una funzione (ad esempio, Bold ), viene specificato come PluginName#FeatureName (ad esempio, links#modifylink ). Se il pulsante è un contenitore (contenente alcune funzioni di un plug-in), viene specificato come #PluginName (ad esempio, #format ). Separatori (| ) tra un gruppo di pulsanti può essere specificato con '-'.
Il nodo a comparsa nella modalità in linea o a schermo intero contiene un elenco dei popovers utilizzati. Ogni nodo secondario sotto il popovers nodo viene denominato in base al plug-in (ad esempio, format ). Dispone di una proprietà items contenente un elenco delle funzioni del plug-in (ad esempio, format#bold ).

Impostazioni dell'interfaccia utente e criteri di contenuto RTE

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 Creazione di modelli di pagina 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.
A partire da AEM 6.4 Service Pack 3, le opzioni disponibili nell’editor Rich Text scorrono a valle dalle configurazioni dell’interfaccia utente ai criteri dei contenuti.
  • Le impostazioni di configurazione dell'interfaccia utente definiscono le opzioni disponibili per i criteri di contenuto.
  • Se la configurazione dell'interfaccia utente dell'editor Rich Text è stata rimossa o non abilita un elemento, il criterio del contenuto non è in grado di configurarlo.
  • Un autore ha accesso solo a tali funzionalità, rese disponibili dalle configurazioni dell'interfaccia utente e dai criteri di contenuto.
Ad esempio, è possibile consultare la documentazione sul componente Text Core.

Personalizzare la mappatura tra icone e comandi della barra degli strumenti

È 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.
  1. Crea un nodo denominato icons in uiSettings/cui .
  2. Creare nodi per le singole icone sottostanti.
  3. 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 all'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>

Passa a Editor Rich Text CoralUI 2

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 consiglia di non effettuare il passaggio. 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 classi. Se utilizzate plug-in personalizzati per l’editor Rich Text CoralUI 3, utilizzate rte.coralui3 la libreria.
  1. Sovrapponi il nodo /libs/cq/gui/components/authoring/editors/clientlibs/core sotto /apps , quindi effettua le seguenti operazioni:
    • Replace rte.coralui3 with rte.coralui2 for the dependencies property.
    • Replace cq.authoring.editor.core.inlineediting.rte.coralui3 with cq.authoring.editor.core.inlineediting.rte.coralui2 for the embed property.
    • Replace cq.authoring.rte.coralui3 with cq.authoring.rte.coralui2 for the embed property.
  2. Sovrapponi i nodi /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3 e /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2 sotto /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 .
  3. 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 .
  4. Sovrapponi il nodo cq/ui/widgets sotto /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.

Ulteriori informazioni

Per ulteriori informazioni sulla configurazione dell'editor Rich Text, consulta il riferimento API index.html AEM Widget.
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 offre un’ampia gamma di funzionalità tramite i plug-in elencati in CQ.form.rte.plugins.Plugin . Per ciascun plug-in:
    • Per informazioni dettagliate sulle funzionalità che possono essere abilitate o disattivate, consultate Funzioni.
    • Consultate Opzioni di configurazione per tutti i parametri disponibili per una configurazione dettagliata del plug-in appropriato.
  • Sono inoltre disponibili ulteriori informazioni sulle regole HTML per i collegamenti.
Le opzioni di cui sopra possono essere utilizzate per estendere e personalizzare il proprio editor Rich Text. Ad esempio, per elencare gli ancoraggi disponibili nella pagina durante la creazione di un collegamento, puoi fornire la tua implementazione dell’ LinkPlugin .

Limitazioni note

La funzionalità AEM RTE presenta i seguenti limiti:
  • Le funzionalità RTE sono supportate solo nelle finestre di dialogo dei componenti di AEM. L'editor Rich Text non è supportato nelle procedure guidate o nei moduli di base come Proprietà Personalizzazione delle visualizzazioni delle proprietà pagina pagina e Scaffolding nell'interfaccia touch.
  • AEM non funziona sui dispositivi Problemi noti ibridi.
  • Non assegnare un nome al nodo di configurazione RTE 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.