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

L’editor Rich Text offre agli autori un’ampia gamma di funzionalità per modificare il contenuto di testo. Sono disponibili icone, caselle di selezione, barre degli strumenti e menu per un'esperienza di modifica del testo WYSIWYG. Gli amministratori configurano l’editor Rich Text per abilitare, disabilitare ed estendere le funzioni disponibili nei componenti di authoring. Scopri in che modo gli autori utilizzano l'editor Rich Text per l'authoring dei contenuti web.

Di seguito sono elencati i concetti e i passaggi necessari per la configurazione dell’editor Rich Text.

Interfaccia utente disponibile per gli autori understand-rte-ui

L'interfaccia dell'editor Rich Text offre una progettazione reattiva per l'ambiente di authoring. L'interfaccia è progettata per essere utilizzata su dispositivi touch e desktop.

Figura: barra degli strumenti dell'Editor Rich Text con tutte le opzioni disponibili abilitate.

La barra degli strumenti fornisce le opzioni per l’esperienza di authoring WYSIWYG. Gli amministratori di Experience Manager possono configurare le opzioni disponibili nella barra degli strumenti dell'interfaccia. Un set completo di opzioni di modifica è disponibile per impostazione predefinita in Experience Manager. Gli sviluppatori possono personalizzare Experience Manager per aggiungere altre opzioni di modifica.

Varie modalità di editing editingmodes

Gli autori possono creare e modificare il contenuto testuale in Experience Manager 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 in base alle configurazioni dell’editor Rich Text.

Modifica in linea inline-editing

Per modificare il contenuto di una pagina, apri il contenuto con un doppio clic lento . Viene visualizzata una barra degli strumenti compatta con opzioni di base.

Figura: Modifica in linea con le opzioni di base nella barra degli strumenti.

Modifica a tutto schermo full-screen-editing

È possibile aprire Experience Manager componenti in visualizzazione a schermo intero che nasconde il contenuto della pagina e occupa lo schermo disponibile. Prendi in considerazione la modifica a schermo intero di una versione dettagliata della modifica in linea, in quanto offre le opzioni di modifica più avanzate. È possibile aprirlo facendo clic sull'icona dalla barra degli strumenti compatta quando si utilizza la modalità di modifica in linea.

Nella finestra di dialogo in modalità a tutto schermo, oltre 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 a una finestra di dialogo che contiene l’editor Rich Text insieme ad altri componenti.

Figura: la barra degli strumenti dettagliata dell'editor Rich Text quando si modifica in modalità a schermo intero.

Modifica finestre di dialogo dialog-editing

Quando si fa doppio clic su un componente, viene visualizzata una finestra di dialogo per la modifica del contenuto. La finestra di dialogo viene visualizzata sopra la pagina esistente. In alcuni scenari specifici, la finestra di dialogo si apre come finestra pop-up. 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 finestra di dialogo.

Informazioni sui plug-in dell’editor Rich Text e sulle funzioni associate aboutplugins

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

Le funzionalità di base dell'editor Rich Text vengono attivate o disattivate dal valore della proprietà features in un nodo specifico del plug-in appropriato.

Nella tabella seguente sono elencati i plug-in correnti:

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

La modalità di modifica dell'editor Rich Text e l'interfaccia fornita agli autori determinano il percorso per i dettagli di configurazione quando si attivano i plug-in dell'editor Rich Text. Le posizioni sono:

Configura le seguenti proprietà applicabili in modalità di modifica Finestra di dialogo:

Quando si utilizza l'editor Rich Text nella finestra di dialogo touch, impostare la proprietà useFixedInlineToolbar su true per evitare problemi.

Abilitare le funzionalità dell’editor Rich Text 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 la proprietà Features. Puoi configurare la proprietà features per abilitare o disabilitare le varie funzioni di ciascun plug-in.

Per informazioni dettagliate sulle configurazioni dei plug-in dell'editor Rich Text, vedere come attivare e configurare i plug-in dell'editor Rich Text.

Il componente di testo Componenti core consente agli editor di modelli di configurare molti plug-in dell'editor Rich Text utilizzando l'interfaccia utente come criteri di contenuto, eliminando la necessità di configurazione tecnica. I criteri dei contenuti possono funzionare con le configurazioni dell’interfaccia utente dell’editor Rich Text come descritto in questo documento. Per ulteriori informazioni, consulta creare modelli di pagina e la documentazione per gli sviluppatori di Componenti core.

A scopo di riferimento, i componenti di testo predefiniti (forniti come parte di un’installazione standard) sono disponibili all’indirizzo:

• /libs/wcm/foundation/components/text
• /libs/foundation/components/text

Per creare un componente testo personalizzato, copia il componente precedente invece di modificare questi componenti.

Configurare la barra degli strumenti dell’editor Rich Text dialogfullscreen

Experience Manager consente di configurare l'interfaccia per l'Editor Rich Text in modo diverso per le diverse modalità di modifica. Di seguito sono riportate le impostazioni predefinite. Puoi modificare questi valori predefiniti in base alle tue esigenze. Puoi personalizzare solo le funzioni della barra degli strumenti che desideri fornire agli autori. Non è necessario specificare tutte le configurazioni della barra degli strumenti.

Per configurare la barra degli strumenti per dialogFullScreen, utilizzare 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 le modalità in linea e 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 funzionalità (ad esempio, Bold), viene specificata come PluginName#FeatureName (ad esempio, links#modifylink).

Se l'opzione è a comparsa (contenente alcune caratteristiche di un plug-in), viene specificata come #PluginName (ad esempio, #format).

È possibile specificare separatori (|) tra un gruppo di opzioni con -.

Il nodo pop-up in modalità in linea o a schermo intero contiene un elenco dei pop-up utilizzati. Ogni nodo figlio sotto il nodo popovers è denominato come il plug-in (ad esempio, formato). La proprietà 'items' contiene un elenco di caratteristiche del plug-in (ad esempio, format#bold).

Impostazioni dell’interfaccia utente e criteri dei contenuti dell’Editor Rich Text rtecontentpolicies

Gli amministratori possono controllare le opzioni dell’editor Rich Text utilizzando i criteri del contenuto, ad esempio anziché eseguire la configurazione come descritto in precedenza. I criteri del contenuto definiscono le proprietà di progettazione di un componente quando viene utilizzato come parte di un modello modificabile. Ad esempio, se un componente testo che utilizza l’editor Rich Text viene utilizzato con un modello modificabile, il criterio del contenuto può definire che l’opzione grassetto sia disponibile e che siano disponibili alcune opzioni di formattazione di paragrafo. I criteri per i contenuti 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, puoi visualizzare la documentazione dei componenti core testo.

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

È possibile personalizzare la mappatura tra le icone Coral visualizzate sulla barra degli strumenti dell'editor Rich Text e i comandi disponibili. Oltre alle icone Coral, non è possibile utilizzare altre icone.

Di seguito è riportato uno snippet di esempio per mappare il comando Bold all'icona di Coral 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>

Limitazioni note known-limitations

La funzionalità dell'editor Rich Text Experience Manager presenta le seguenti limitazioni:

Best practice e suggerimenti best-practices-and-tips