Configurare i plug-in Editor Rich Text

Le funzionalità RTE sono disponibili tramite una serie di plug-in, ognuno dei quali dispone della proprietà features. È possibile configurare la proprietà features per attivare o disattivare una o più funzioni RTE. Questo articolo descrive come configurare in modo specifico i plug-in RTE.

Per informazioni dettagliate sulle altre configurazioni dell’editor Rich Text, consultate Configurare l’editorRich Text.

Nota

Quando si lavora con CRXDE Lite, si consiglia di salvare regolarmente le modifiche utilizzando Save All (Salva tutto).

Attivare un plug-in e configurare la proprietà features

Per attivare un plug-in, effettuate le seguenti operazioni. Alcuni passaggi sono necessari solo quando configurate un plug-in per la prima volta, in quanto i nodi corrispondenti non esistono.

Per impostazione predefinita, format, link, list, justifye control i plug-in e tutte le relative funzioni sono abilitati nell’editor Rich Text.

Nota

Il rispettivo nodo rtePlugins è denominato <rtePlugins-node> per evitare duplicazioni in questo articolo.

  1. Utilizzando CRXDE Lite, individuate il componente di testo per il progetto.

  2. Crea il nodo padre di <rtePlugins-node> se non esiste, prima di configurare eventuali plug-in RTE:

    • A seconda del componente, i nodi principali sono:

      • config: .../text/cq:editConfig/cq:inplaceEditing/config
      • un nodo di configurazione alternativo: .../text/cq:editConfig/cq:inplaceEditing/inplaceEditingTextConfig
      • text: .../text/dialog/items/tab1/items/text
    • Sono di tipo: jcr:PrimaryType cq:Widget

    • Entrambe hanno la seguente proprietà:

      • Nome name
      • Tipo String
      • Valore ./text
  3. A seconda dell’interfaccia per la quale state configurando, create un nodo <rtePlugins-node>, se non esiste:

    • Nome rtePlugins
    • Tipo nt:unstructured
  4. Create un nodo per ciascun plug-in che desiderate attivare:

    • Tipo nt:unstructured
    • Denominate l'ID plug-in del plug-in richiesto

Dopo aver attivato un plug-in, attenetevi alle seguenti linee guida per configurare la features proprietà.

Abilitare tutte le funzioni
Abilitare alcune funzionalità specifiche Disattiva tutte le funzioni
Nome funzionalità funzionalità funzionalità
Tipo Stringa String[] (multi-stringa; imposta Tipo su Stringa e fai clic su Più in CRXDE Lite) Stringa
Valore * (un asterisco)
impostare uno o più valori di feature -

Comprendere il plug-in più recente

Il findreplace plug-in non richiede alcuna configurazione. Funziona fuori dagli schemi.

Quando si utilizza la funzionalità replace, la stringa replace da sostituire deve essere immessa contemporaneamente alla stringa find. È comunque possibile fare clic su find per cercare la stringa prima di sostituirla. Se la stringa di sostituzione viene immessa dopo aver fatto clic su Trova, la ricerca viene reimpostata all’inizio del testo.

La finestra di dialogo Trova e sostituisci diventa trasparente quando si fa clic su Trova e diventa opaca quando si fa clic su Sostituisci. Questo consente all’autore di rivedere il testo che verrà sostituito dall’autore. Se gli utenti fanno clic su replace all (Sostituisci tutto), la finestra di dialogo viene chiusa e viene visualizzato il numero di sostituzioni effettuate.

Configurare le modalità Incolla

Quando si utilizza l’editor Rich Text, gli autori possono incollare il contenuto in una delle tre modalità seguenti:

  • Modalità browser: Incolla il testo utilizzando l'implementazione Incolla predefinita del browser. Non è un metodo consigliato in quanto potrebbe introdurre markup indesiderati.

  • Modalità testo normale: Incolla il contenuto degli Appunti come testo normale. Rimuove tutti gli elementi di stile e formattazione dal contenuto copiato prima di inserire AEM componente.

  • Modalità MS Word: Incolla il testo, incluse le tabelle, con la formattazione durante la copia da MS Word. La copia e l'incolla del testo da un'altra origine, ad esempio una pagina Web o MS Excel, non è supportata e viene mantenuta solo la formattazione parziale.

Configurare le opzioni Incolla disponibili nella barra degli strumenti dell’editor Rich Text

Nella barra degli strumenti dell’editor Rich Text è possibile fornire agli autori alcune o nessuna di queste tre icone:

  • Incolla (Ctrl+V): Può essere preconfigurata per corrispondere a una delle tre modalità Incolla elencate sopra.

  • Incolla come testo: Fornisce la funzionalità di modalità Testo semplice.

  • Incolla da Word: Fornisce la funzionalità della modalità MS Word.

Per configurare l’editor Rich Text in modo da visualizzare le icone richieste, attenetevi alla seguente procedura.

  1. Passa al componente; ad esempio:

    /apps/<myProject>/components/text

  2. Individuare il nodo rtePlugins/edit. Se il nodo non esiste, vedi attivare un plug-in .

  3. Create la features proprietà sul edit nodo e aggiungete una o più funzioni. Salvate tutte le modifiche.

Configurare il comportamento dell'icona Incolla (Ctrl+V) e della scelta rapida

Per preconfigurare il comportamento dell'icona Incolla (Ctrl+V) , effettuate le seguenti operazioni. Questa configurazione definisce anche il comportamento della scelta rapida da tastiera Ctrl+V che verrà utilizzata dagli autori per incollare il contenuto.

La configurazione consente tre tipi di casi di utilizzo:

  • Incolla il testo utilizzando l'implementazione Incolla predefinita del browser. Non è un metodo consigliato in quanto potrebbe introdurre markup indesiderati. Configurato utilizzando browser di seguito.

  • Incolla il contenuto degli Appunti come testo normale. Rimuove tutti gli elementi di stile e formattazione dal contenuto copiato prima di inserire AEM componente. Configurato utilizzando plaintext di seguito.

  • Incolla il testo, incluse le tabelle, con la formattazione durante la copia da MS Word. La copia e l'incolla del testo da un'altra origine, ad esempio una pagina Web o MS Excel, non è supportata e viene mantenuta solo la formattazione parziale. Configurato utilizzando wordhtml di seguito.

  1. Nel componente, passa al <rtePlugins-node>/edit nodo. Creare i nodi se questi non esistono. Per ulteriori informazioni, consultate Attivare un plug-in.

  2. Nel edit nodo create una proprietà utilizzando i seguenti dettagli:

    • Nome defaultPasteMode
    • Tipo String
    • Valore Una delle modalità Incolla browser, plaintexto wordhtml.

Configurare i formati consentiti per incollare il contenuto

La modalità Incolla come Microsoft Word (paste-wordhtml) può essere configurata ulteriormente in modo da poter definire in modo esplicito gli stili consentiti quando si incolla in AEM da un altro programma, ad esempio Microsoft Word.

Ad esempio, se è consentito incollare AEM solo formati ed elenchi in grassetto, è possibile filtrare gli altri formati. Questa operazione è denominata filtro Incolla configurabile, che può essere eseguita per entrambi:

Per i collegamenti è inoltre possibile definire i protocolli accettati automaticamente.

Per configurare quali formati sono consentiti quando si incolla testo in AEM da un altro programma:

  1. Nel componente, andate al nodo <rtePlugins-node>/edit. Creare i nodi se questi non esistono. Per ulteriori dettagli, consultate Attivare un plug-in.

  2. Create un nodo sotto il edit nodo per mantenere le regole di incolla HTML:

    • Nome htmlPasteRules
    • Tipo nt:unstructured
  3. Create un nodo in htmlPasteRules, per mantenere i dettagli dei formati di base consentiti:

    • Nome allowBasics
    • Tipo nt:unstructured
  4. Per controllare i singoli formati accettati, creare una o più delle seguenti proprietà sul allowBasics nodo:

    • Nome bold
    • Nome italic
    • Nome underline
    • Nome anchor (per collegamenti e ancoraggi denominati)
    • Nome image

    Tutte le proprietà sono di tipo Boolean, quindi nel valore appropriato è possibile selezionare o rimuovere il segno di spunta per abilitare o disabilitare la funzionalità.

    Nota

    Se non viene definito in modo esplicito, viene utilizzato il valore predefinito true e il formato viene accettato.

  5. Altri formati possono essere definiti anche utilizzando un intervallo di altre proprietà o nodi, applicati anche al htmlPasteRules nodo:

Proprietà Tipo Descrizione
allowBlockTags Stringa[]

Definisce l'elenco dei tag di blocco consentiti.

I possibili tag di blocco includono (tra gli altri):

  • titoli (h1, h2, h3)
  • paragrafo p)
  • lists (ol, ul)
  • tabelle (tabella)
fallbackBlockTag Stringa

Definisce il tag blocco utilizzato per tutti i blocchi con un tag blocco non incluso in allowBlockTags.

Nella maggior parte dei casi è sufficiente.

tabella nt:unstructured

Definisce il comportamento da applicare quando si incollano le tabelle.

Questo nodo deve avere la proprietà allow (tipo Boolean) per definire se è consentito incollare tabelle.

Se allow è impostato su false, è necessario specificare la proprietà ignoreMode (type String) per definire il modo in cui viene gestito il contenuto della tabella incollato. I valori validi per ignoreMode sono:

  • remove: Rimuove il contenuto della tabella.
  • paragraph: Trasforma le celle di tabella in paragrafi.
elenco nt:unstructured

Definisce il comportamento da applicare agli elenchi.

Deve avere la proprietà allow (tipo Boolean) per definire se è consentito incollare elenchi.

Se allow è impostato su false, è necessario specificare la proprietà ignoreMode (tipo String) per definire la gestione del contenuto dell'elenco incollato. I valori validi per ignoreMode sono:

  • remove: Rimuove il contenuto dell'elenco.
  • paragraph: Trasforma le voci di elenco in paragrafi.

Esempio di una htmlPasteRules struttura valida:

"htmlPasteRules": {
    "allowBasics": {
        "italic": true,
        "link": true
    },
    "allowBlockTags": [
        "p", "h1", "h2", "h3"
    ],
    "list": {
        "allow": false,
        "ignoreMode": "paragraph"
    },
    "table": {
        "allow": true,
        "ignoreMode": "paragraph"
    }
}
  1. Salvate tutte le modifiche.

Configurare gli stili di testo

Gli autori possono applicare Stili per modificare l’aspetto di una parte del testo. Gli stili sono basati sulle classi CSS che avete precedentemente definito nel foglio di stile CSS. Il contenuto formattato è racchiuso in span tag che utilizzano l' class attributo per fare riferimento alla classe CSS. Esempio:

<span class=monospaced>Monospaced Text Here</span>

Quando il plug-in Stili è attivato per la prima volta, non è disponibile alcun Stili predefinito. L'elenco a comparsa è vuoto. Per fornire agli autori Stili, effettuate le seguenti operazioni:

  • Attiva il selettore a discesa Stile.
  • Specificare le posizioni dei fogli di stile.
  • Specificare i singoli stili che è possibile selezionare dall'elenco a discesa Stile.

Per configurazioni successive (ri)aggiungere altri stili, seguire solo le istruzioni per fare riferimento a un nuovo foglio di stile e specificare gli stili aggiuntivi.

Nota

È inoltre possibile definire stili per tabelle o celledi tabella. Queste configurazioni richiedono procedure separate.

Attiva l'elenco a discesa Stile

Questa operazione viene eseguita attivando il plug-in per gli stili.

  1. Nel componente, andate al nodo <rtePlugins-node>/styles. Creare i nodi se questi non esistono. Per ulteriori dettagli, consultate Attivare un plug-in.

  2. Creare la features proprietà sul styles nodo:

    • Nome features
    • Tipo String
    • Valore * (asterisco)
  3. Salvate tutte le modifiche.

Nota

Una volta abilitato il plug-in Stili, l'elenco a discesa Stile viene visualizzato nella finestra di dialogo di modifica. Tuttavia, l'elenco è vuoto in quanto non è configurato alcun stile.

Specificare la posizione del foglio di stile

Quindi, specificare le posizioni dei fogli di stile a cui si desidera fare riferimento:

  1. Individuate, ad esempio, il nodo principale del componente di testo /apps/<myProject>/components/text.

  2. Aggiungete la proprietà externalStyleSheets al nodo padre di <rtePlugins-node>:

    • Nome externalStyleSheets
    • Type String[] (multi-stringa; fate clic su Multi in CRXDE)
    • Valore(i) Percorso e nome del file di ogni foglio di stile da includere. Utilizzare i percorsi dell'archivio.
    Nota

    È possibile aggiungere riferimenti a fogli di stile aggiuntivi in qualsiasi momento successivo.

  3. Salvate tutte le modifiche.

Nota

Quando si utilizza l'editor Rich Text in una finestra di dialogo (interfaccia classica) È possibile specificare fogli di stile ottimizzati per la modifica RTF. A causa di restrizioni tecniche, il contesto CSS viene perso nell'editor, quindi potrebbe essere utile emulare questo contesto per migliorare l'esperienza WYSIWYG.
L’Editor Rich Text utilizza un elemento DOM contenitore con un ID CQrte che può essere utilizzato per fornire stili diversi per la visualizzazione e la modifica:
#CQ td {
/ defines the style for viewing }
#CQrte td {
/ defines the style for editing }

Specificare gli stili disponibili nell'elenco a comparsa

  1. Nella definizione del componente, andate al nodo <rtePlugins-node>/styles, come creato in Abilitazione del selettorea discesa Stile.

  2. Sotto il nodo styles, creare un nuovo nodo (detto anche styles) per rendere disponibile l’elenco:

    • Nome styles
    • Tipo cq:WidgetCollection
  3. Create un nuovo nodo sotto il styles nodo per rappresentare un singolo stile:

    • Nome, è possibile specificare il nome, ma deve essere adatto allo stile
    • Tipo nt:unstructured
  4. Aggiungete la proprietà cssName a questo nodo per fare riferimento alla classe CSS:

    • Nome cssName
    • Tipo String
    • Valore Il nome della classe CSS (senza un '.' precedente.; for example, cssClass instead of .cssClass)
  5. Aggiungere la proprietà text allo stesso nodo; definisce il testo visualizzato nella casella di selezione:

    • Nome text
    • Tipo String
    • Valore Descrizione dello stile; viene visualizzata nella casella di selezione a discesa Stile.
  6. Salva le modifiche.

    Ripetere i passaggi indicati sopra per ogni stile richiesto.

Configurare i formati dei paragrafi

Qualsiasi testo creato nell’editor Rich Text viene inserito all’interno di un tag blocco, con l’impostazione predefinita <p>. Attivando il paraformat plug-in, è possibile specificare tag di blocco aggiuntivi da assegnare ai paragrafi tramite un elenco a discesa di selezione. I formati di paragrafo determinano il tipo di paragrafo assegnando il tag blocco corretto. L'autore può selezionarli e assegnarli mediante il selettore Formato. I tag blocco di esempio includono, tra l'altro, il paragrafo standard <p>, i titoli <h1>, <h2> e così via.

ATTENZIONE

Questo plug-in non è adatto per contenuti con struttura complessa, come elenchi o tabelle.

Nota

Se un tag blocco, ad esempio un tag <hr>, non può essere assegnato a un paragrafo, non è un caso d'uso valido per un plug-in in paraformat.

Quando il plug-in Formati paragrafo è attivato per la prima volta, non sono disponibili formati paragrafo predefiniti. L'elenco a comparsa è vuoto. Per fornire agli autori i formati di paragrafo, effettuate le seguenti operazioni:

  • Attiva l'elenco a discesa Formato.
  • Specificate i tag di blocco che possono essere selezionati come formati di paragrafo dall'elenco a discesa.

Per configurazioni successive (ri)aggiungete altri formati, seguite solo la parte pertinente delle istruzioni.

Attiva il selettore a discesa Formato

Innanzitutto, attivate il plug-in paraformat:

  1. Nel componente, andate al nodo <rtePlugins-node>/paraformat. Creare i nodi se questi non esistono. Per ulteriori dettagli, consultate Attivare un plug-in.

  2. Creare la features proprietà sul paraformat nodo:

    • Nome features
    • Tipo String
    • Valore * (asterisco)
Nota

Se il plug-in non è configurato ulteriormente, vengono attivati i seguenti formati predefiniti:

  • Paragrafo ( <p>)
  • Intestazione 1 ( <h1>)
  • Intestazione 2 ( <h2>)
  • Intestazione 3 ( <h3>)
ATTENZIONE

Durante la configurazione dei formati di paragrafo dell’editor Rich Text, non rimuovere il tag di paragrafo <p> come opzione di formattazione. Se il tag <p> viene rimosso, l'autore del contenuto non può selezionare l'opzione Formati di paragrafo, anche se sono configurati formati aggiuntivi.

Specificare i formati di paragrafo disponibili

I formati dei paragrafi possono essere resi disponibili per la selezione tramite:

  1. Nella definizione del componente, andate al nodo <rtePlugins-node>/paraformat, come creato in Abilitazione del selettorea discesa del formato.

  2. Sotto il paraformat nodo creare un nuovo nodo, per contenere l'elenco dei formati:

    • Nome formats
    • Tipo cq:WidgetCollection
  3. Crea un nuovo nodo sotto il formats nodo, che contiene i dettagli per un singolo formato:

    • Nome, è possibile specificare il nome, ma deve essere adatto al formato (ad esempio, myparagraph, myheading1).
    • Tipo nt:unstructured
  4. A questo nodo, aggiungere la proprietà per definire il tag blocco utilizzato:

    • Nome tag

    • Tipo String

    • Valore Il tag block per il formato; ad esempio: p, h1, h2, ecc.

      Non è necessario inserire le parentesi angolari di delimitazione.

  5. Per visualizzare il testo descrittivo nell'elenco a discesa, aggiungere un'altra proprietà allo stesso nodo:

    • Nome description
    • Tipo String
    • Valore Il testo descrittivo per questo formato; ad esempio, Paragrafo, Intestazione 1, Intestazione 2 e così via. Questo testo viene visualizzato nell'elenco di selezione Formato.
  6. Salva le modifiche.

    Ripetere i passaggi per ciascun formato richiesto.

ATTENZIONE

Se si definiscono formati personalizzati, i formati predefiniti (<p>, <h1>, <h2>e <h3>) vengono rimossi. Create nuovamente <p> il formato predefinito.

Configurare i caratteri speciali

In un'installazione standard di AEM, quando il misctools plug-in è abilitato per caratteri speciali (specialchars) è immediatamente disponibile per l'uso una selezione predefinita; ad esempio, i simboli di copyright e marchio.

È possibile configurare l’editor Rich Text per rendere disponibile la propria selezione di caratteri; mediante la definizione di caratteri distinti o di un'intera sequenza.

ATTENZIONE

Se si aggiungono caratteri speciali, la selezione predefinita viene ignorata. Se necessario, (ri)definite questi caratteri nella vostra selezione.

Definire un singolo carattere

  1. Nel componente, andate al nodo <rtePlugins-node>/misctools. Creare i nodi se questi non esistono. Per ulteriori dettagli, consultate Attivare un plug-in.

  2. Creare la features proprietà sul misctools nodo:

    • Nome features

    • Tipo String[]

    • Valore specialchars

      (o String / * se si applicano tutte le funzioni per questo plug-in)

  3. In misctools Crea un nodo per contenere le configurazioni di caratteri speciali:

    • Nome specialCharsConfig
    • Tipo nt:unstructured
  4. In specialCharsConfig Crea un altro nodo per contenere l’elenco di caratteri:

    • Nome chars
    • Tipo nt:unstructured
  5. In chars Aggiungi un nuovo nodo per contenere una singola definizione di carattere:

    • Il nome può essere specificato, ma deve riflettere il carattere; ad esempio, metà.
    • Tipo nt:unstructured
  6. A questo nodo aggiungere la seguente proprietà:

    • Nome entity
    • Tipo String
    • Valutare la rappresentazione HTML del carattere richiesto; ad esempio, &189; per la frazione di una metà.
  7. Salva le modifiche.

Una volta salvata la proprietà, il carattere rappresentato viene visualizzato in CRXDE. Vedere l'esempio della metà sottostante. Ripetete i passaggi indicati sopra per rendere disponibili agli autori altri caratteri speciali.

In CRXDE, aggiungere un singolo carattere da rendere disponibile nella barra degli strumenti dell’editor Rich Text

In CRXDE, aggiungere un singolo carattere da rendere disponibile nella barra degli strumenti dell’editor Rich Text

Definire un intervallo di caratteri

  1. Utilizzate i passaggi da 1 a 3 della sezione Definizione di un singolo carattere.

  2. In chars Aggiungi un nuovo nodo per contenere la definizione dell'intervallo di caratteri:

    • Il nome può essere specificato, ma deve riflettere l’intervallo di caratteri; ad esempio, matite.
    • Tipo nt:unstructured
  3. Sotto questo nodo (denominato in base all'intervallo di caratteri speciale) aggiungere le due seguenti proprietà:

    • Nome rangeStart

      Tipo Long
      Valore della rappresentazione Unicode (decimale) del primo carattere dell'intervallo

    • Nome rangeEnd

      Tipo Long
      Valore della rappresentazione Unicode (decimale) dell'ultimo carattere dell'intervallo

  4. Salva le modifiche.

    Ad esempio, definire un intervallo compreso tra 9998 e 10000 contiene i seguenti caratteri.

    In CRXDE, definire un intervallo di caratteri da rendere disponibili in RTE

    In CRXDE, definire un intervallo di caratteri da rendere disponibili in RTE

    I caratteri speciali disponibili nell’editor Rich Text vengono visualizzati dagli autori in una finestra a comparsa

    I caratteri speciali disponibili nell’editor Rich Text vengono visualizzati dagli autori in una finestra a comparsa

Configurare gli stili di tabella

Gli stili vengono in genere applicati al testo, ma su una tabella o su alcune celle di tabella è possibile applicare un set separato di stili. Tali stili sono disponibili per gli autori dalla casella di selezione Stile della finestra di dialogo Proprietà cella o Proprietà tabella. Gli stili sono disponibili quando si modifica una tabella all’interno di un componente Testo (o derivato) e non nel componente Tabella standard.

Nota

È possibile definire stili per tabelle e celle solo per l'interfaccia classica.

Nota

Copiare e incollare tabelle in o dal componente RTE dipende dal browser. Non è supportato out-of-box per tutti i browser. È possibile ottenere risultati variabili a seconda della struttura della tabella e del browser. Ad esempio, quando copiate e incollate una tabella in un componente RTE in Mozilla Firefox nell’interfaccia classica e Touch, il layout della tabella non viene mantenuto.

  1. All’interno del componente, andate al nodo <rtePlugins-node>/table. Creare i nodi se questi non esistono. Per ulteriori dettagli, consultate Attivare un plug-in.

  2. Creare la features proprietà sul table nodo:

    • Nome features
    • Tipo String
    • Valore * (asterisco)
    Nota

    Se non si desidera abilitare tutte le funzionalità della tabella, è possibile creare la features proprietà come:

    • Tipo String[]
    • Valore uno o entrambi dei valori seguenti, a seconda delle necessità:
      • table consentire la modifica delle proprietà della tabella; inclusi gli stili.
      • cellprops per consentire la modifica delle proprietà delle celle, inclusi gli stili.
  3. Definire la posizione dei fogli di stile CSS per farvi riferimento. Vedere Specifica della posizione del foglio di stile, identica a quella utilizzata per definire gli stili per il testo. La posizione può essere definita se avete definito altri stili.

  4. Sotto il table nodo creare i seguenti nuovi nodi (come richiesto):

    • Per definire gli stili per l'intera tabella (disponibili in Proprietà ​tabella):

      • Nome tableStyles
      • Tipo cq:WidgetCollection
    • Per definire gli stili per le singole celle (disponibili in Proprietà ​cella):

      • Nome cellStyles
      • Tipo cq:WidgetCollection
  5. Create un nuovo nodo (sotto il nodo tableStyles o cellStyles secondo quanto appropriato) per rappresentare un singolo stile:

    • Il nome può essere specificato, ma deve riflettere lo stile.
    • Tipo nt:unstructured
  6. In questo nodo creare le proprietà:

    • Definizione dello stile CSS a cui fare riferimento

      • Nome cssName
      • Tipo String
      • Valore del nome della classe CSS (senza un precedente, .ad esempio, cssClass anziché .cssClass)
    • Definizione di un testo descrittivo da visualizzare nel selettore a discesa

      • Nome text
      • Tipo String
      • Valutare il testo da visualizzare nell'elenco di selezione
  7. Salvate tutte le modifiche.

Ripetere i passaggi indicati sopra per ogni stile richiesto.

Configurare le intestazioni nascoste nelle tabelle per l'accessibilità

A volte è possibile creare tabelle di dati senza testo visivo in un'intestazione di colonna, partendo dal presupposto che lo scopo dell'intestazione sia determinato dalla relazione visiva della colonna con altre colonne. In questo caso, è necessario fornire testo interno nascosto all'interno della cella nella cella di intestazione per consentire agli assistenti vocali e altre tecnologie di assistenza di aiutare i lettori con varie esigenze a comprendere lo scopo della colonna.

Per migliorare l’accessibilità in tali scenari, l’editor Rich Text supporta le celle di intestazione nascoste. Inoltre, fornisce le impostazioni di configurazione relative alle intestazioni nascoste nelle tabelle. Queste impostazioni consentono di applicare stili CSS alle intestazioni nascoste nelle modalità di modifica e anteprima. Per aiutare gli autori a identificare le intestazioni nascoste nella modalità di modifica, includete nel codice i seguenti parametri:

  • hiddenHeaderEditingCSS: Specifica il nome della classe CSS applicata alla cella di intestazione nascosta quando viene modificato l'editor Rich Text.
  • hiddenHeaderEditingStyle: Specifica una stringa di stile applicata alla cella di intestazione nascosta quando viene modificato l'editor Rich Text.

Se specificate sia il CSS che la stringa Stile nel codice, la classe CSS ha la precedenza sulla stringa di stile e potrebbe sovrascrivere eventuali modifiche alla configurazione apportate dalla stringa Stile.

Per aiutare gli autori ad applicare CSS sulle intestazioni nascoste nella modalità di anteprima, potete includere nel codice i seguenti parametri:

  • hiddenHeaderClassName: Specifica il nome della classe CSS applicata alla cella di intestazione nascosta in modalità di anteprima.
  • hiddenHeaderStyle: Specifica una stringa di stile applicata alla cella di intestazione nascosta in modalità di anteprima.

Se specificate sia il CSS che la stringa Stile nel codice, la classe CSS ha la precedenza sulla stringa di stile e potrebbe sovrascrivere eventuali modifiche alla configurazione apportate dalla stringa Stile.

Aggiunta di dizionari per il controllo ortografia

Quando il plug-in per il controllo ortografia è attivato, l'editor Rich Text utilizza i dizionari per ciascuna lingua appropriata. Questi vengono quindi selezionati in base alla lingua del sito Web, ottenendo la proprietà language della struttura ad albero secondaria o estraendo la lingua dall’URL; ad esempio. il /en/ ramo è controllato come inglese, il /de/ ramo come tedesco.

Nota

Il messaggio Spell checking failed viene visualizzato se viene eseguito un controllo per una lingua non installata. I dizionari standard si trovano in /libs/cq/spellchecker/dictionaries, insieme ai file Leggimi appropriati. Non modificate i file.

Un'installazione standard AEM include i dizionari per inglese americano (en_us) e inglese britannico (en_gb). Per aggiungere altri dizionari, procedere come segue.

  1. Passate alla pagina https://extensions.openoffice.org/.

  2. Per trovare un dizionario della lingua desiderata, effettuate una delle seguenti operazioni:

    • Cerca dizionario di tua scelta di lingua. Nella pagina del dizionario, individuate il collegamento alla pagina Web dell'origine o dell'autore originale. Individuare i file dizionario per v2.x su una pagina di questo tipo.
    • Cercate i file dizionario v2.x all'indirizzo https://wiki.openoffice.org/wiki/User:Khirano/Dictionaries.
  3. Scaricate l'archivio con le definizioni dell'ortografia. Estrarre il contenuto dell'archivio nel file system.

    ATTENZIONE

    Sono supportati solo i dizionari nel MySpell formato per OpenOffice.org v2.0.1 o versioni precedenti. Poiché i dizionari ora sono file di archivio, si consiglia di verificare l'archivio dopo il download.

  4. Individuate i file .aff e .dic. Mantieni il nome del file in lettere minuscole. Ad esempio de_de.aff e de_de.dic.

  5. Caricate i file .aff e .dic nella directory archivio /apps/cq/spellchecker/dictionaries.

Nota

Il controllo ortografia RTE è disponibile su richiesta. Non viene eseguito automaticamente quando si inizia a digitare del testo. Per eseguire il controllo ortografia, fare clic su Controllo ortografia nella barra degli strumenti. L’editor Rich Text controlla l’ortografia delle parole ed evidenzia le parole errate.
Se si incorporano modifiche suggerite dal controllo ortografia, lo stato delle modifiche di testo e delle parole errate non vengono più evidenziati. Per eseguire il controllo ortografia, toccate o fate di nuovo clic sul pulsante Controllo ortografia.

Configurare la dimensione della cronologia per le azioni di annullamento e ripristino

L’editor Rich Text consente agli autori di annullare o ripristinare alcune ultime modifiche. Per impostazione predefinita, nella cronologia sono memorizzate 50 modifiche. Puoi configurare questo valore come necessario.

  1. All’interno del componente, andate al nodo <rtePlugins-node>/undo. Creare questi nodi se non esistono. Per ulteriori dettagli, consultate Attivare un plug-in.

  2. Sul undo nodo creare la proprietà:

    • Nome maxUndoSteps

    • Tipo Long

    • Valore del numero di passaggi di annullamento da salvare nella cronologia.

      • Il valore predefinito è 50.
      • Usare 0 per disattivare completamente Annulla/Ripristina.
  3. Salva le modifiche.

Configurare le dimensioni della scheda

Quando il carattere di tabulazione viene premuto all'interno di un testo, viene inserito un numero predefinito di spazi; per impostazione predefinita si tratta di tre spazi unificatori e uno spazio. Per definire la dimensione della scheda:

  1. Nel componente, andate al nodo <rtePlugins-node>/keys. Creare i nodi se questi non esistono. Per ulteriori dettagli, consultate Attivare un plug-in.

  2. Sul keys nodo creare la proprietà:

    • Nome tabSize
    • Tipo String
    • Valore del numero di caratteri di spazio da utilizzare per la tabulazione
  3. Salva le modifiche.

Imposta margine rientro

Quando il rientro è abilitato (impostazione predefinita), puoi definire la dimensione del rientro:

Nota

Questa dimensione del rientro è applicata solo ai paragrafi (blocchi) di testo; non incide sul rientro degli elenchi effettivi.

  1. All’interno del componente, andate al nodo <rtePlugins-node>/lists. Creare questi nodi se non esistono. Per ulteriori dettagli, consultate Attivare un plug-in.

  2. Sul lists nodo create il identSize parametro:

    • Nome: identSize
    • Tipo: Long
    • Valore: numero di pixel necessari per il margine di rientro

Configurare l'altezza dello spazio modificabile

È possibile definire l’altezza dello spazio modificabile visualizzato nella finestra di dialogo del componente:

  1. Sul ../items/text nodo nella definizione della finestra di dialogo per il componente, create una nuova proprietà:

    • Nome height
    • Tipo Long
    • Valore dell’altezza del quadro di modifica in pixel
    Nota

    L'altezza della finestra di dialogo non viene modificata.

  2. Salva le modifiche.

Nota

Questo è applicabile solo quando si utilizza l’editor Rich Text in una finestra di dialogo (non durante la modifica locale nell’interfaccia classica).

Configurare stili e protocolli per i collegamenti

Quando aggiungete collegamenti in AEM, potete definire:

  • Stili CSS da utilizzare
  • I protocolli automaticamente accettati

Per configurare la modalità in cui i collegamenti vengono aggiunti in AEM da un altro programma, definire le regole HTML.

  1. Utilizzando CRXDE Lite, individuate il componente di testo per il progetto.

  2. Crea un nuovo nodo allo stesso livello <rtePlugins-node>, ovvero crea il nodo sotto il nodo principale di <rtePlugins-node>:

    • Nome htmlRules
    • Tipo nt:unstructured
    Nota

    Il ../items/text nodo ha la proprietà:

    • Nome xtype
    • Tipo String
    • Valore richtext

    La posizione del ../items/text nodo può variare, a seconda della struttura del dialogo; due esempi:

    • /apps/myProject>/components/text/dialog/items/text
    • /apps/<myProject>/components/text/dialog/items/panel/items/text
  3. In htmlRules, creare un nuovo nodo.

    • Nome links
    • Tipo nt:unstructured
  4. Sotto il links nodo definire le proprietà come richiesto:

    • Stile CSS per collegamenti interni:

      • Nome cssInternal
      • Tipo String
      • Valore il nome della classe CSS (senza un '.' precedente.; for example, cssClass instead of .cssClass)
    • Stile CSS per collegamenti esterni

      • Nome cssExternal
      • Tipo String
      • Valore il nome della classe CSS (senza un '.' precedente.; for example, cssClass instead of .cssClass)
    • Array di protocolli validi. I protocolli supportati sono http://, https://, file://e mailto:.

      • Nome protocols
      • Tipo String[]
      • Valori uno o più protocolli
    • defaultProtocol (proprietà di tipo String): Protocollo da utilizzare se l'utente non ne ha specificato uno in modo esplicito.

      • Nome defaultProtocol
      • Tipo String
      • Valori uno o più protocolli predefiniti
    • Definizione di come gestire l'attributo target di un collegamento. Crea un nuovo nodo:

      • Nome targetConfig
      • Tipo nt:unstructured

      Sul nodo targetConfig: definire le proprietà richieste:

      • Specificate la modalità di destinazione:

        • Nome mode

        • Tipo String)

        • Valore:

          • auto: indica che è selezionata una destinazione automatica

            (specificata dalla targetExternal proprietà per i collegamenti esterni o targetInternal per i collegamenti interni).

          • manual: non applicabile in questo contesto

          • blank: non applicabile in questo contesto

      • Destinazione dei collegamenti interni:

        • Nome targetInternal
        • Tipo String
        • Valore della destinazione per i collegamenti interni (utilizzare solo quando "mode is auto")
      • Destinazione per i collegamenti esterni:

        • Nome targetExternal
        • Tipo String
        • Valutare la destinazione per i collegamenti esterni (utilizzata solo quando la modalità è auto).
  5. Salvate tutte le modifiche.

In questa pagina