DocumentazioneAEMGuida utente

Configurazione dell’editor Rich Text per l’editor universale configure-rte

Ultimo aggiornamento: 19 agosto 2026
  • Si applica a:
  • Experience Manager as a Cloud Service

Creato per:

  • Admin
  • Developer

Scopri come configurare l’editor Rich Text nell’editor universale.

Panoramica overview

L’editor universale fornisce un editor Rich Text (RTE) sia nella posizione originale che nel pannello delle proprietà per consentire agli autori di applicare le modifiche di formattazione mentre modificano il testo.

L’editor Rich Text è configurabile utilizzando filtri componenti. Questo documento descrive le opzioni di configurazione disponibili, con alcuni esempi.

NOTE
Quando avvii un progetto Universal Editor, tutte le funzionalità Rich Text supportate dal backend (AEM con Edge Delivery o implementazione headless) sono automaticamente attive e disponibili nella finestra dell'editor modale dell'editor Rich Text
  • È possibile disattivare le opzioni non necessarie.
  • L’attivazione di opzioni non compatibili con il tipo di progetto non è supportata.

Struttura di configurazione structure

La configurazione dell’editor Rich Text è costituita da due parti:

  • toolbar: la configurazione della barra degli strumenti controlla le opzioni di modifica disponibili nell’interfaccia utente e la loro organizzazione.
  • actions: la configurazione delle azioni consente di personalizzare il comportamento e l’aspetto delle singole azioni di modifica.

Queste configurazioni possono essere definite come parte di un filtro componente con la proprietà rte.

[
  {
    "id": "richtext",
    "rte": {
      "toolbar": {
        // Toolbar configuration
      },
      "actions": {
        // Action-specific configurations
      }
    },
    "components": [
      "richtext"
    ]
  }
]

Configurazione barra degli strumenti toolbar

La configurazione della barra degli strumenti controlla quali opzioni di modifica sono disponibili nell’interfaccia utente e come sono organizzate. Queste sono le sezioni disponibili

{
  "toolbar": {
    // Text formatting options
    "format": ["bold", "italic", "underline", "strike", "code_inline", "text_color"],
    // Text alignment options
    "alignment": ["left", "center", "right", "justify"],
    // Text direction options, right-to-left or left-to-right
    "direction": ["rtl", "ltr"],
    // Indentation controls
    "indentation": ["indent", "outdent"],
    // Block-level elements
    "blocks": ["paragraph", "h1", "h2", "h3", "h4", "h5", "h6", "code_block", "blockquote"],
    // List options
    "list": ["bullet_list", "ordered_list"],
    // Content insertion
    "insert": ["link", "unlink", "image", "table", "special_characters"],
    // Superscript/subscript
    "sr_script": ["superscript", "subscript"],
    // Editor utilities
    "editor": ["removeformat", "clean_unsupported_tags", "paste_text", "fullscreen", "find_and_replace"],
    // Advanced items (e.g. the class picker).
    "advanced": ["classes"],
    // Section ordering (optional)
    "sections": ["format", "alignment", "list"]
  }
}

Configurazione azione action

La configurazione delle azioni consente di personalizzare il comportamento e l’aspetto delle singole azioni di modifica. Queste sono le sezioni disponibili.

Opzioni azioni comuni common-action-options

La maggior parte delle azioni supporta le seguenti opzioni comuni:

  • shortcut?: stringa - Sostituisce la scelta rapida da tastiera predefinita per l’azione (se presente)
  • label?: string - Esegue l’override dell’etichetta utilizzata per l’azione nell’interfaccia utente
  • hideInline?: booleano - Quando true, nasconde questa azione dalla barra degli strumenti dell’editor RTE in-context (inline)
{
  "actions": {
    "bold": {
      "label": "Bold",
      "shortcut": "Mod-B",
      "hideInline": true
    }
  }
}

Azioni formato format

Le azioni di formato vengono utilizzate per applicare la formattazione e supportare il passaggio da un tag HTML a un altro per scegliere tra varianti semantiche. Sono disponibili le seguenti sezioni.

{
  "actions": {
    "bold": {
      "tag": "strong",      // Use <strong> instead of <b>
      "shortcut": "Mod-B",  // Custom keyboard shortcut
      "label": "Make Bold"  // Custom button label
    },
    "italic": {
      "tag": "em",          // Use <em> instead of <i>
      "shortcut": "Mod-I",
      "label": "Italicize"
    },
    "strike": {
      "tag": "del"          // Use <del> instead of <s>
    }
  }
}

Azioni elenco list

Le azioni elenco supportano il wrapping del contenuto per controllare la struttura di HTML. Sono disponibili le seguenti sezioni.

{
  "actions": {
    "bullet_list": {
      "wrapInParagraphs": true,    // <ul><li><p>content</p></li></ul>
      "shortcut": "Mod-Shift-8",   // Custom shortcut
      "label": "Bullet List"       // Custom label
    },
    "ordered_list": {
      "wrapInParagraphs": false,   // <ol><li>content</li></ol> (default)
      "shortcut": "Mod-Shift-9"
    }
  }
}

Azioni tabella table-actions

Le azioni di tabella supportano il wrapping del contenuto per controllare la struttura HTML nelle celle di tabella:

{
  "actions": {
    "table": {
      "wrapInParagraphs": false, // <td>content</td> (default)
      "shortcut": "Mod-Alt-T",   // Custom shortcut
      "label": "Insert Table"    // Custom label
    }
  }
}

Opzioni di configurazione della tabella table-configuration-options

  • wrapInParagraphs: false (impostazione predefinita) - Le celle di tabella contengono contenuto di testo non racchiuso
  • wrapInParagraphs: true - Le celle della tabella racchiudono il contenuto nei tag paragrafo

Esempi:

Quando wrapInParagraphs: false:

<!-- Single line -->
<td>Cell content</td>

<!-- Multiple paragraphs get <br> separation -->
<td>Line 1<br />Line 2</td>

Quando wrapInParagraphs: true:

<!-- Single paragraph -->
<td><p>Cell content</p></td>

<!-- Multiple paragraphs preserved -->
<td>
  <p>Line 1</p>
  <p>Line 2</p>
</td>
NOTE
Quando si rimuove il wrapping dei paragrafi (wrapInParagraphs: false), lo strumento di pulizia inserisce automaticamente <br> tag tra più paragrafi per mantenere le interruzioni di riga visive. Questo segue gli standard HTML e le pratiche comuni dei principali editor Rich Text.

Finestre di dialogo delle proprietà properties-dialog

Il plug-in per tabelle consente di visualizzare tre finestre di dialogo dell’editor delle proprietà che si aprono dal menu Tabella quando i flag sono attivati:

  • Proprietà tabella: modificare la larghezza/altezza, la spaziatura delle celle, la spaziatura delle celle, l’allineamento, il bordo (larghezza/stile/colore) e il colore di sfondo della tabella di inclusione. Le modifiche apportate al bordo e alla spaziatura interna delle celle vengono estese a ogni cella della stessa transazione in modo che il risultato visivo corrisponda a quello previsto dall’utente.
  • Proprietà riga - Consente di modificare il tipo di riga (Intestazione/Corpo/Piè di pagina), l’allineamento, l’altezza, il bordo (larghezza/stile/colore) e il colore di sfondo della riga. Il tipo di riga è di sola sezione (corrispondente al valore predefinito di TinyMCE table_header_type: "section"): una riga di intestazione si sposta in <thead> durante la serializzazione, ma le celle rimangono <td>. Usa Proprietà cella -> Cella intestazione per <th>. Al momento della serializzazione le righe sono raggruppate in <thead>/<tbody>/<tfoot> sezioni reali (corrispondenti a TinyMCE/Word). Consulta la nota sulla conservazione di seguito. I bordi vengono estesi alle celle della riga in modo da essere visualizzati sotto il comando border-collapse.
  • Proprietà cella: modifica il tipo di cella (cella cella cella/intestazione), la larghezza/altezza, l’allineamento orizzontale e verticale, il bordo (larghezza/stile/colore) e il colore di sfondo. Quando un CellSelection si estende su più celle, la patch viene applicata a ogni cella selezionata contemporaneamente. Il tipo di cella attiva la cella tra table_cell (<td>) e table_header (<th>).

Per impostazione predefinita, tutti e tre i componenti sono disattivati (opt-in) e corrispondono al resto della superficie di configurazione dell’editor Rich Text, dove le funzionalità sono disattivate fino a quando un consumatore non le abilita esplicitamente. Consenso per consumatore quando vuoi far apparire le finestre di dialogo:

{
  actions: {
    table: {
      showTableProperties: true, // default false: show "Table Properties" menu item
      showRowProperties: true,   // default false: show "Row Properties" menu item
      showCellProperties: true,  // default false: show "Cell Properties" menu item
    }
  }
}

Opzioni della finestra di dialogo Proprietà properties-dialog-options

|—|—|—|
| Opzione | Predefiniti | Effetto |
| showTableProperties | false | Mostra l’elemento Proprietà tabella nel menu a discesa Tabella |
| showRowProperties | false | Mostra l’elemento Proprietà riga nel sottomenu Riga |
| showCellProperties | false | Mostra l’elemento Proprietà cella nel sottomenu Cella |

Le finestre di dialogo consentono di eseguire un ciclo completo di htmlAttrs.style sul rispettivo nodo ProseMirror, ovvero CSS in linea come emette TinyMCE/Word, non attributi di dati personalizzati. La larghezza della cella scrive anche il livello di schema colwidth in modo che sopravviva al computer delle tabelle PM. Tipo di cella gestito dal tag del nodo (<td>/<th>).

Lo schema prosemirror-tables è piatto (table -> table_row -> cell) senza nodi di sezione <thead>/<tbody>/<tfoot>, pertanto internamente l’intento di intestazione/corpo/piè di pagina di una riga viene mantenuto sul <tr> come marcatore data-row-type. Quando il tipo di una riga cambia, le righe vengono riordinate in posizione nell’intestazione -> corpo -> ordine del piè di pagina all’interno della stessa transazione, in modo che l’area di lavoro dell’editor corrisponda alla struttura esportata in tempo reale (le righe di intestazione vengono sollevate verso l’alto, le righe di piè di pagina verso il basso, come TinyMCE). Questo riordinamento nell’editor viene ignorato quando una cella si estende su più righe (rowspan > 1), dove lo spostamento di una riga danneggerebbe la griglia. Durante l’uscita, sanitizeHTML raggruppa le righe in vere sezioni <thead>/<tbody>/<tfoot> (prima le righe di intestazione, poi le righe di piè di pagina) e rilascia l’indicatore, producendo la stessa struttura TinyMCE/Word emit. Durante l’introduzione, la sezione di inclusione di <tr> viene letta nuovamente nel marcatore, quindi vengono sezionati i round-trip di HTML.

Le azioni di collegamento supportano il controllo degli attributi di destinazione per gestire il comportamento dei collegamenti. Sono disponibili le seguenti sezioni.

{
  "actions": {
    "link": {
      "hideTarget": false,       // Show target attribute options (default)
      "shortcut": "Mod-K",       // Custom keyboard shortcut
      "label": "Insert Link"     // Custom button label
    },
    "unlink": {
      "shortcut": "Mod-Shift-K", // Custom keyboard shortcut
      "label": "Remove Link"     // Custom button label
    }
  }
}
  • hideTarget: false (predefinito) - Include l’attributo di destinazione nei collegamenti, consentendo _self, _blank, ecc.
  • hideTarget: true - Escludi completamente l’attributo di destinazione dai collegamenti

L’azione unlink viene visualizzata solo quando il cursore si trova all’interno di un collegamento esistente. Rimuove la formattazione del collegamento mantenendo il contenuto del testo.

Azioni immagine image

Le azioni relative alle immagini supportano il wrapping degli elementi immagine per generare un markup dinamico per le immagini. Sono disponibili le seguenti sezioni.

{
  "actions": {
    "image": {
      "wrapInPicture": false,     // Use <img> tag (default)
      "shortcut": "Mod-Shift-I",  // Custom keyboard shortcut
      "label": "Insert Image"     // Custom button label
    }
  }
}

Opzioni di configurazione immagine image-options

  • wrapInPicture: false (predefinito) - Genera <img> elementi semplici
  • wrapInPicture: true - Racchiudi immagini negli elementi <picture> per la progettazione reattiva

Schermo intero full-screen

L’azione a schermo intero attiva o disattiva la modalità a schermo intero:

{
  actions: {
    fullscreen: {
      label: "Fullscreen"; // Custom button label
    }
  }
}

Quando lo schermo intero è attivo, il wrapper dell’editor riceve la classe rte-fullscreen-wrapper. Le app consumer possono eseguire il targeting di questa classe per applicare stili personalizzati o proprietà CSS (ad esempio, z-index, dimensioni, sovrapposizione). (Non supportato nell’editor universale)

Configurazione rientro indentation

La funzione Rientro dispone di una configurazione a livello di funzionalità che controlla l’ambito del comportamento di rientro, oltre a configurazioni delle singole azioni per collegamenti ed etichette.

{
  "actions": {
    // Feature-level configuration
    "indentation": {
      "scope": "all"  // Controls what content can be indented (default: "all")
    },

    // Individual action configurations
    "indent": {
      "shortcut": "Tab",           // Custom keyboard shortcut
      "label": "Increase Indent"   // Custom button label
    },
    "outdent": {
      "shortcut": "Shift-Tab",     // Custom keyboard shortcut
      "label": "Decrease Indent"   // Custom button label
    }
  }
}

Opzioni ambito rientro indentation-options

  • scope: all (impostazione predefinita) - Il rientro/rientro si applica a tutto il contenuto:

    • Elenchi: annulla/annulla annidamento voci elenco
    • Paragrafi e intestazioni: Aumenta/diminuisce il livello di rientro generale

  • scope: lists - Il rientro/rientro si applica solo agli elementi dell’elenco:

    • Elenchi: annulla/annulla annidamento voci elenco
    • Paragrafi e intestazioni: nessun rientro (pulsanti disattivati per questi)
NOTE
La nidificazione degli elenchi tramite i tasti TAB/MAIUSC+TAB funziona indipendentemente dalle impostazioni generali di rientro.

Caratteri speciali special-characters

L’azione di inserimento special_characters apre un popover del selettore di caratteri per l’inserimento di caratteri speciali (simboli, operatori matematici, segni di valuta, punteggiatura, frecce e così via) nella posizione del cursore.

{
  "toolbar": {
    "insert": ["link", "unlink", "image", "table", "special_characters"],
    "sections": ["insert"],
  },
  "actions": {
    "special_characters": {
      "label": "Special Characters"
    }
  }
}

È incluso un set predefinito di 44 caratteri di uso comune. L’elenco dei caratteri può essere personalizzato tramite due opzioni di configurazione:

  • appendCharacters - Aggiungi caratteri al set predefinito
  • characters - Sostituisci completamente il set predefinito

Ogni voce di carattere ha character (carattere Unicode) e title (descrizione comando/nome accessibile).

Aggiungi caratteri ai valori predefiniti append-special-characters

{
  "actions": {
    "special_characters": {
      "appendCharacters": [
        { "character": "\u2605", "title": "Black star" },
        { "character": "\u2764", "title": "Heavy black heart" },
      ];
    }
  }
}

Sostituisci caratteri speciali predefiniti replace-special-characters

{
  "actions": {
    "special_characters": {
      "characters": [
        { "character": "\u00A9", "title": "Copyright sign" },
        { "character": "\u00AE", "title": "Registered sign" },
        { "character": "\u2122", "title": "Trade mark sign" },
      ];
    }
  }
}

Entrambe le opzioni insieme both-special-character-options

In questo esempio viene utilizzato characters come base, quindi vengono aggiunti caratteri aggiuntivi utilizzando appendCharacters.

{
  "actions": {
    "special_characters": {
      "characters": [
        { "character": "\u00A9", "title": "Copyright sign" },
        { "character": "\u00AE", "title": "Registered sign" }
      ],
      "appendCharacters": [
        { "character": "\u2605", "title": "Black star" }
      ]
    }
  }
}

Classi CSS css-classes

L’azione classes aggiunge un elenco a discesa che applica una classe CSS configurabile al contenuto dell’editor Rich Text. È elencato come elemento nella sezione advanced. Il plug-in scrive/rimuove solo i nomi delle classi sul HTML prodotto. L’app consumer è proprietaria del CSS effettivo per ogni classe ed è responsabile del suo caricamento ovunque venga eseguito il rendering del contenuto dell’editor Rich Text (editor, anteprima, pubblicazione).

Il menu a discesa viene visualizzato solo quando è configurata almeno un’opzione. Il plug-in viene fornito senza valori predefiniti.

{
  toolbar: {
    advanced: ["classes"],
    sections: ["blocks", "format", "advanced"],
  },
  actions: {
    classes: {
      label: "Add Custom Class",
      options: [
        { value: "rte-hero", label: "Hero title" },
        { value: "rte-lede", label: "Lede paragraph" },
        { value: "rte-callout", label: "Callout block" },
        { value: "rte-pill", label: "Pill (inline)" },
      ],
    },
  },
}

Ogni voce ha un valore (il nome della classe CSS scritto in HTML) e un’etichetta (il testo leggibile mostrato nel menu a discesa).

Il target segue la regola “close-to-caret-wins”:

  • Selezione vuota in un’estensione gestita: La classe viene applicata all’esecuzione dell’estensione, non al blocco. Se si sceglie una classe diversa, la classe dell’estensione verrà scambiata. Rimuovi classe personalizzata verrà cancellata.
  • Selezione vuota altrove (solo cursore): La classe scelta viene applicata al predecessore del cursore a livello di blocco più vicino (<p>, <h1>, ecc.). Quando il cursore si trova all’interno di una voce di elenco o di una cella di tabella che racchiude un paragrafo, <li>/<td>/<th> riceve la classe, non il paragrafo interno.
  • Selezione reale: Il testo selezionato è racchiuso in un <span class="...">. Se la selezione dispone già di un’estensione, la classe dell’estensione esistente viene aggiornata.
  • Rimuovi classe personalizzata: rimuovi la classe gestita dalla destinazione (esecuzione span o blocco, a seconda di quale viene risolto dal punto di inserimento). Se l’unico attributo rimanente in un’estensione era la classe gestita, l’estensione stessa viene annullata. L’opzione Rimuovi classe personalizzata viene visualizzata solo quando è attiva una classe gestita.

Le classi esistenti che non fanno parte dell’elenco di opzioni configurato vengono mantenute intatte. Solo le classi gestite vengono scambiate in/out. Le classi del set di consumer coesistono in modo sicuro con il plug-in.

Riflesso a discesa:

  • Con solo il cursore posizionato, il menu a discesa riflette la classe gestita più vicina: l’estensione in corrispondenza del punto di inserimento, se presente, altrimenti il blocco sotto il cursore.
  • Con una selezione, il menu a discesa riflette la classe gestita nell’estensione che racchiude la selezione. Solo quando l’intera selezione condivide la stessa classe. Le selezioni miste non mostrano alcun elemento selezionato.

Tipi di blocco block-types

La sezione della barra degli strumenti blocks esegue il rendering di un elenco a discesa che cambia il blocco corrente tra i tipi di blocco configurati. I valori supportati sono paragraph, h1-h6, code_block e blockquote.

  • blockquote è un blocco di wrapping (ProseMirror content è block+), a differenza di paragraph/h1-h6/code_block che sono blocchi di testo. Selezionando Citazione il blocco corrente viene racchiuso in un <blockquote>. Nel menu a discesa viene quindi visualizzato Citazione come selezionato mentre il punto di inserimento si trova all’interno di uno. Se si seleziona un altro tipo di blocco, ad esempio Paragrafo, all’interno di una virgoletta, il blocco viene prima rimosso dalla virgoletta, quindi anche quest’ultima rimane. Questo rispecchia il menu a discesa dei blocchi di TinyMCE.
  • Poiché si tratta di un nodo di ritorno a capo, un <blockquote> può contenere più paragrafi, elenchi o anche virgolette nidificate. Questo è ciò che consente ai contenuti creati esternamente di eseguire un round trip senza perdite: TinyMCE (contenuto legacy) e Word (incolla) emettono entrambi <blockquote><p>…</p></blockquote> (spesso con più paragrafi) e tale struttura viene mantenuta al caricamento, alla modifica e alla serializzazione anziché essere appiattita.
  • Come per tutti i tipi di blocco, l’app consumer è proprietaria del CSS a cui viene applicato uno stile visivo di <blockquote> ovunque venga eseguito il rendering del contenuto dell’editor Rich Text.
{
  "toolbar": {
    "blocks": ["paragraph", "h1", "h2", "h3", "code_block", "blockquote"],
    "sections": ["blocks"],
  },
  "actions": {
    "blockquote": {
      "label": "Quote", // Custom dropdown label
    },
  },
}

Incolla testo semplice paste-as-text

L’azione dell’editor paste_text abilita un flusso di lavoro standard Incolla come testo normale.

  • Scelta rapida predefinita: Mod-Shift-v (Cmd+Shift+V su macOS, Ctrl+Shift+V su Windows/Linux)
  • Comportamento: Incolla da testo/normale (la formattazione di origine viene ignorata)
    • Negli elenchi, le nuove righe creano nuove voci di elenco.
{
  "toolbar": {
    "editor": ["removeformat", "paste_text"]
  },
  "actions": {
    "paste_text": {
      "shortcut": "Mod-Shift-v",
      "label": "Paste as Text"
    }
  }
}

Trova e sostituisci find-replace

L’azione dell’editor find_and_replace utilizza prosemirror-search (corrispondenze evidenziate) più un plug-in di comando con chiave FIND_AND_REPLACE_PLUGIN_KEY.

  • Integrazione: Aggiungi createFindAndReplacePlugin() ai plug-in ProseMirror del tuo editor quando toolbar.editor include find_and_replace.
  • API: Utilizzare FIND_AND_REPLACE_PLUGIN_KEY.getState(state) per accedere a find, replaceNext, replaceAll e getMatchCount.
  • Stili: Assicurati che l’app carichi CSS per .ProseMirror-search-match e .ProseMirror-active-search-match (dallo stile di prosemirror-search/search.css o il tuo equivalente).
{
  "toolbar": {
    "editor": ["find_and_replace"],
    "sections": ["editor"],
  },
  "actions": {
    "find_and_replace": {
      "label": "Find and replace",
    },
  },
}

Altre azioni other

Tutte le altre azioni supportano la personalizzazione di base. Sono disponibili le seguenti sezioni.

{
  "actions": {
    "h1": {
      "shortcut": "Mod-Alt-1",
      "label": "Large Heading"
    },
    "paragraph": {
      "shortcut": "Mod-Alt-0",
      "label": "Normal Text"
    },
    "link": {
      "shortcut": "Mod-K",
      "label": "Insert Link",
      "hideTarget": false    // Show target attribute options (default: false)
    }
  }
}

Esempio completo example

Di seguito è riportato un esempio di configurazione completa.

[
  {
    "id": "richtext",
    "rte": {
      // Configure which tools appear in toolbar
      "toolbar": {
        "format": [
          "bold",
          "italic",
          "text_color"
        ],
        "blocks": [
          "paragraph",
          "h1",
          "h2"
        ],
        "list": [
          "bullet_list",
          "ordered_list"
        ],
        "insert": [
          "link",
          "unlink",
          "image",
          "special_characters"
        ],
        "editor": [
          "removeformat",
          "paste_text"
        ],
        "sections": [
          "format",
          "blocks",
          "list",
          "insert"
        ]
      },
      // Customize individual action behavior
      "actions": {
        // Format actions with HTML tag choices
        "bold": {
          "tag": "strong",
          "shortcut": "Mod-B",
          "label": "Bold"
        },
        "italic": {
          "tag": "em",
          "shortcut": "Mod-I"
        },
        // List actions with content wrapping
        "bullet_list": {
          "wrapInParagraphs": true,
          "label": "Bullet List"
        },
        "ordered_list": {
          "wrapInParagraphs": false
        },
        // Link actions with target control
        "link": {
          "hideTarget": false,
          "shortcut": "Mod-K",
          "label": "Add Link"
        },
        "unlink": {
          "label": "Remove Link"
        },
        // Image actions with picture wrapping
        "image": {
          "wrapInPicture": false, // Use <img> tag instead of <picture>
          "shortcut": "Mod-Shift-I",
          "label": "Insert Image",
        },
        // Special characters with custom additions
        "special_characters": {
          "label": "Special Characters",
          "appendCharacters": [{ "character": "\u2605", "title": "Black star" }],
        },
        // Other actions with basic customization
        "paste_text": {
          "shortcut": "Mod-Shift-v",
          "label": "Paste as Text",
        },
        "h1": {
          "shortcut": "Mod-Alt-1",
          "label": "Main Heading"
        }
      }
    }
  }
]

Dettagli opzione azione action-details

Diverse opzioni hanno ulteriori dettagli importanti da tenere a mente.

wrapInParagraphs wrapInParagraphs

L’opzione wrapInParagraphs per gli elenchi controlla la struttura HTML.

wrapInParagraphs: false (impostazione predefinita) wrapInParagraphs-false

<ul>
  <li>Simple text content</li>
  <li>Another item</li>
</ul>

wrapInParagraphs: true wrapInParagraphs-true

<ul>
  <li><p>Text wrapped in paragraphs</p></li>
  <li><p>Supports rich formatting within items</p></li>
</ul>

Utilizza wrapInParagraphs: true quando hai bisogno di:

  • Formattazione avanzata all’interno di voci di elenco
  • Più paragrafi per voce di elenco
  • Stile coerente a livello di blocco

wrapInPicture

L’opzione wrapInPicture per le immagini controlla la struttura HTML generata per il contenuto dell’immagine.

wrapInPicture: false (impostazione predefinita) wrapinpicture-false

<img src="image.jpg" alt="Description" />

wrapInPicture: true wrapinpicture-true

<picture>
  <img src="image.jpg" alt="Description" />
</picture>

Utilizza wrapInPicture: true quando hai bisogno di:

  • Supporto per immagini reattive con <source> elementi.
  • Capacità di direzione dell’arte.
  • Funzionalità di immagine avanzate a prova di futuro.
  • Struttura coerente degli elementi immagine.
NOTE
Quando wrapInPicture: true è abilitato, le immagini possono essere migliorate con ulteriori elementi <source> per diversi formati e query multimediali, rendendole più flessibili per la progettazione reattiva.

L’opzione hideTarget per i collegamenti controlla se l’attributo target è incluso nei collegamenti generati e se la finestra di dialogo per la creazione dei collegamenti include un campo per la selezione della destinazione.

hideTarget: false (impostazione predefinita) hideTarget-false

<a href="https://example.com" target="_self">Link text</a>
<a href="https://example.com" target="_blank">External link</a>

hideTarget: true hideTarget-true

<a href="https://example.com">Link text</a>

Disabilitazione dei collegamenti sulle immagini disableforimages

L’opzione disableForImages per i collegamenti controlla se gli utenti possono creare collegamenti su immagini ed elementi dell’immagine. Questo vale sia per gli elementi <img> in linea che per gli elementi <picture> a livello di blocco.

disableForImages: false (impostazione predefinita) disableforimages-false

Gli utenti possono selezionare le immagini e racchiuderle nei collegamenti.

<!-- Inline image with link -->
<a href="https://example.com">
  <img src="image.jpg" alt="Description" />
</a>

<!-- Block-level picture with link -->
<a href="https://example.com">
  <picture>
    <img src="image.jpg" alt="Description" />
  </picture>
</a>

disableForImages: true disableforimages-true

Il pulsante di collegamento è disattivato quando si seleziona un’immagine o un’immagine. Gli utenti possono creare collegamenti solo sul contenuto di testo.

<!-- Images remain standalone without links -->
<img src="image.jpg" alt="Description" />

<picture>
  <img src="image.jpg" alt="Description" />
</picture>

<!-- Links work normally on text -->
<a href="https://example.com">Link text</a>

Utilizza disableForImages: true quando desideri:

  • Mantenere la coerenza visiva impedendo le immagini collegate.
  • Semplifica la struttura del contenuto separando le immagini dalla navigazione.
  • Applica criteri per contenuto che limitano il collegamento delle immagini.
  • Riduzione della complessità di accessibilità dei contenuti.
NOTE
Questa impostazione influisce solo sulla possibilità di creare nuovi collegamenti sulle immagini. Non rimuove i collegamenti esistenti dalle immagini nel contenuto.

Opzioni tag tag

Le azioni di formato consentono il passaggio tra diverse varianti di HTML.

Azione
Tag predefinito
Tag alternativi
Caso d’uso
bold
<strong>
<b>
Enfasi semantica e visiva
italic
<em>
<i>
Stile semantico e visivo
strike
<del>
<s>
Eliminazione visiva e semantica

Scegliere i tag semantici (<strong>, <em>, <del>) per migliorare l’accessibilità e SEO.

Codice in linea inline-code

L’opzione di formato code_inline contrassegna un intervallo di testo come codice in linea, eseguendo il rendering di <code> (ad esempio, riferimento a una chiamata foo() in una frase). A differenza di bold/italic/strike, non dispone di opzioni di cambio tag ed esclude tutti gli altri contrassegni. Il codice in linea è stato sottoposto a rendering letterale, pertanto non è possibile applicare bold/italic/link. La scelta rapida da tastiera predefinita è Mod-e.

Questo è diverso dal blocco code_block (<pre><code>) disponibile nel menu a discesa blocks. code_inline è un contrassegno in linea all’interno di una riga, mentre code_block è un blocco autonomo su più righe. I blocchi di codice contengono solo testo normale (nessun segno), pertanto <code> non è mai nidificato all’interno di <pre>.

Use the <code>foo()</code> helper here.

Colore testo color

L’opzione di formato text_color aggiunge funzionalità di colorazione del testo all’editor.

<!-- With color applied -->
<span style="color: #ff0000">Colored text</span>

<!-- Color removed -->
Plain text

Il plug-in analizza anche gli elementi legacy <font color="..."> per la compatibilità con le versioni precedenti.

Scelte rapide da tastiera keyboard-shortcuts

I collegamenti utilizzano il formato Mod-Key in cui:

  • Mod = Cmd su Mac, Ctrl su Windows/Linux
  • Esempi: Mod-B, Mod-Shift-8, Mod-Alt-1

HTML non supportato unsupported-html

Per impostazione predefinita, i tag HTML sconosciuti vengono rimossi quando vengono analizzati dall’editor. Per conservarli, fornire il consenso tramite l’opzione di configurazione unsupportedHtml:

const rteConfig = {
  unsupportedHtml: true, // preserve unknown HTML tags (default: false)
};
Valore
Comportamento
false (impostazione predefinita)
I tag HTML sconosciuti vengono eliminati durante l’analisi.
true
I tag di HTML sconosciuti sono racchiusi in un nodo personalizzato non supportato a blocchi, in modo che il contenuto possa essere sottoposto a round trip in modo sicuro.

unsupportedHtmlOptions.structuralTags (facoltativo) unsupportedhtmloptions

Utilizza unsupportedHtmlOptions.structuralTags per controllare quali tag strutturali aggiuntivi vengono trattati come HTML supportati.

const rteConfig = {
  unsupportedHtml: true,
  unsupportedHtmlOptions: {
    structuralTags: ["div", "section"], // preserve configured tags as supported
  },
};
Valore
Comportamento
Omesso/[]
Non ci sono tag strutturali aggiuntivi nella whitelist.
["div"]
<div> è trattato come HTML supportato e non viene racchiuso come non supportato.
["div", "section"]
Sia <div> che <section> sono trattati come HTML supportati e non sono racchiusi come non supportati.
NOTE
unsupportedHtmlOptions influisce sul comportamento solo quando unsupportedHtml è abilitato.

Se attivato, l’editor esegue il rendering dei nodi non supportati con tag wrapper (unsupported-block/unsupported-inline) e classi wrapper. Le app consumer devono fornire lo stile per questa classe (ad esempio, bordo, spaziatura interna, sfondo). L’etichetta del tag all’interno del blocco utilizza rte-unsupported-label, che può anche essere personalizzato.

  • rte-unsupported-block
  • rte-unsupported-inline
  • rte-unsupported-label

Le app consumer devono fornire uno stile per queste classi (ad esempio bordo, spaziatura, sfondo e allineamento in linea).

Quando unsupportedHtml è abilitato, il consumatore deve aggiungere il plug-in dei nodi non supportati (ad esempio createUnsupportedNodesPlugin()) in modo che la copia di un blocco non supportato o di un nodo in linea inserisca il testo interno negli Appunti (solo testo normale) e gli utenti possano incollare il contenuto altrove.

recommendation-more-help
experience-manager-cloud-service-help-main-toc