Configurare l’editor Rich Text configure-the-rich-text-editor

L’editor Rich Text offre agli autori numerose funzionalità per modificare il contenuto del testo. Icone, caselle di selezione, barra degli strumenti e menu sono disponibili per un’esperienza di modifica del testo WYSIWYG.

Per informazioni su come utilizzare le funzioni dell’editor Rich Text per l’authoring, consulta Utilizza l’editor Rich Text per l’authoring. 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 il completamento delle 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 understand-touch-enabled-ui-and-classic-ui

L’interfaccia touch è l’interfaccia standard per AEM. Adobe di interfaccia utente touch con design dinamico per l’ambiente di authoring, nella versione 5.6. L’interfaccia utente touch è progettata per i dispositivi touch e desktop. L’interfaccia utente originale è molto diversa da quella classica.

Figura: Barra degli strumenti dell’Editor Rich Text nell’interfaccia touch

Figura: Barra degli strumenti dell’Editor Rich Text nell’interfaccia classica

Varie modalità di editing editingmodes

Gli autori possono creare e modificare il contenuto testuale in AEM utilizzando le diverse modalità dei componenti. Le opzioni della barra degli strumenti per l’authoring e la formattazione dei contenuti e l’esperienza utente dei componenti abilitati per l’editor Rich Text in diverse modalità di modifica variano a seconda delle configurazioni dell’editor Rich Text.

Modifica in linea inline-editing

Quando il contenuto viene aperto (con un doppio tocco o clic lento), è possibile modificarlo all’interno della pagina. Viene presentata 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 una struttura arancione evidenzia il contenuto. Se Content Finder è aperto, nella parte superiore della finestra viene visualizzata una barra degli strumenti con le opzioni di formattazione dell’editor Rich Text disponibili. Se Content Finder non è aperto, le opzioni di formattazione non vengono visualizzate ed è possibile eseguire solo modifiche di testo di base.

Modifica a tutto schermo full-screen-editing

AEM componenti possono essere aperti nella visualizzazione a schermo intero che nasconde il contenuto della pagina e occupa la schermata disponibile. Considera la modifica a schermo intero una versione dettagliata della modifica in linea in quanto offre il maggior numero di opzioni di modifica. Può essere aperto facendo clic su , dalla barra degli strumenti compatta quando si utilizza la modalità di editing 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à di dialogo. È applicabile solo per una finestra di dialogo che contiene l’editor Rich Text e altri componenti.

Figura: Barra degli strumenti dettagliata dell’editor Rich Text durante la modifica in modalità a schermo intero nell’interfaccia touch

Modifica finestra di dialogo dialog-editing

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

Figura: Modalità di modifica delle finestre 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 sulle funzioni associate aboutplugins

La funzionalità è resa disponibile tramite una serie di plug-in, ciascuno con:

Le funzioni di base dell’editor Rich Text vengono attivate o disattivate dal valore features su un nodo specifico del plug-in appropriato.

Nella tabella seguente sono elencati i plug-in correnti, che mostrano:

Comprendere i percorsi e le posizioni di configurazione understand-the-configuration-paths-and-locations

La modalità di modifica dell’editor Rich Text (e dell’interfaccia utente) che vengono forniti agli autori e che determinano la posizione dei dettagli di configurazione quando attivazione dei plug-in RTE:

Configura le seguenti proprietà che si applicano nella modalità di modifica della finestra di dialogo solo nell’interfaccia utente touch:

Quando l’editor Rich Text viene utilizzato nella finestra di dialogo touch, impostare la proprietà useFixedInlineToolbar su true è obbligatorio per evitare problemi.

Personalizzazione della modifica diretta customizing-in-place-editing

Per definire quale selettore HTML avvia l’editor di testo, configura le seguenti proprietà:

La proprietà corrispondente per la modalità di dialogo è name.

Abilitare le funzionalità RTE attivando i plug-in enable-rte-functionalities-by-activating-plug-ins

Le funzionalità dell’editor Rich Text sono disponibili tramite una serie di plug-in, ciascuno con proprietà features . Puoi configurare la proprietà features per 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 scoprire come configurare l’editor Rich Text. In questo pacchetto tutte le funzioni sono abilitate.

Ottieni file

Configura RTE, barra degli strumenti dialogfullscreen

AEM consente di configurare l’interfaccia utente per l’editor RichText in modo diverso per le diverse modalità di modifica. Le impostazioni predefinite sono fornite di seguito. Puoi ignorare queste impostazioni predefinite in base alle tue esigenze.

Per una migliore esperienza di authoring:

<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 la modalità a schermo intero vengono utilizzate diverse impostazioni dell’interfaccia utente. La proprietà della barra degli strumenti consente di 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 pover (contenente alcune caratteristiche 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 in modalità in linea o a schermo intero contiene un elenco dei popovers in uso. Ogni nodo figlio sotto il popovers il nodo prende il nome dal plug-in (ad esempio, format). Ha una proprietà items contenente un elenco delle funzioni del plug-in (ad esempio, format#bold).

Impostazioni dell’interfaccia utente e criteri del contenuto dell’editor Rich Text rtecontentpolicies

Gli amministratori possono controllare le opzioni dell’editor Rich Text utilizzando i criteri dei contenuti, ad esempio anziché eseguire la configurazione come descritto in precedenza. I criteri dei contenuti 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, i criteri per i contenuti possono definire che l’opzione in grassetto è disponibile e che sono disponibili alcune opzioni di formattazione dei paragrafi. I criteri del contenuto sono riutilizzabili e possono essere applicati a più modelli.

A partire da 6.4 Service Pack 3, le opzioni disponibili nell’editor Rich Text scorrono a valle dalle configurazioni dell’interfaccia utente ai criteri dei contenuti.

Ad esempio, puoi visualizzare il Documentazione sui componenti core di testo.

Personalizzare la mappatura tra icone e comandi della barra degli strumenti iconstoolbar

Puoi personalizzare la mappatura tra le icone Coral visualizzate sulla barra degli strumenti dell’Editor Rich Text e i comandi disponibili. Non è possibile utilizzare altre icone oltre alle icone Coral.

Di seguito è riportato 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>

Passa all’editor Rich Text CoralUI 2 switch-to-coralui-rich-text-editor

In una pagina puoi includere la clientlib dell’editor Rich Text CoralUI 2 o 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, effettua le seguenti operazioni.

Ulteriori informazioni further-information

Per ulteriori informazioni sulla configurazione dell’editor Rich Text, consulta la API per i Widget AEM riferimento.

In particolare, per visualizzare i plug-in e le relative opzioni disponibili:

Le opzioni di cui sopra possono essere utilizzate per estendere e personalizzare l’editor Rich Text. Ad esempio, per elencare gli ancoraggi disponibili nella pagina durante la creazione di un collegamento, puoi fornire la tua implementazione della LinkPlugin.

Limitazioni note known-limitations

AEM funzionalità RTE presenta le seguenti limitazioni: