\n\n \n \n Svelte rende i nodi HTML come stringhe. Usa `{@html}` per renderizzarli.\n\n ```svelte\n \n\n {@html $content.myHtmlContent}\n ```\n\n \n \n Preact supporta i nodi HTML direttamente nel JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return \n \n Solid supporta i nodi HTML direttamente nel JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"solid-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return \n \n Angular utilizza la direttiva `[innerHTML]` per renderizzare contenuti HTML.\n\n ```typescript fileName=\"app.component.ts\"\n import { Component } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-root\",\n template: ``,\n })\n export class AppComponent {\n content = useIntlayer(\"app\");\n }\n ```\n\n Usa il metodo `.use()` per fornire componenti personalizzati o sovrascrivere i tag:\n\n ```typescript\n content().myHtmlContent.use({\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n })\n ```\n\n \n\n\n## Configurazione globale con `HTMLProvider`\n\nPuoi configurare il rendering HTML a livello globale per l'intera applicazione. Questo è ideale per definire componenti personalizzati che dovrebbero essere disponibili in tutti i contenuti HTML.\n\n\n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"react-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n ,\n CustomLink: ({ children }) => {children},\n }}\n >\n {children}\n \n );\n ```\n\n Puoi anche utilizzare il tuo motore di rendering HTML:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"react-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderHTML } = await import('react-intlayer/html');\n return renderHTML(html);\n }}\n >\n {children}\n \n );\n ```\n\n > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.\n\n \n \n \n ```typescript fileName=\"main.ts\"\n import { createApp, h } from \"vue\";\n import { intlayer } from \"vue-intlayer\";\n import { intlayerHTML } from \"vue-intlayer/html\";\n import App from \"./App.vue\";\n\n const app = createApp(App);\n\n app.use(intlayer);\n app.use(intlayerHTML, {\n components: {\n p: (props, { slots }) => h(\"p\", { class: \"prose\", ...props }, slots.default?.()),\n CustomLink: (props, { slots }) => h(\"a\", { href: \"/details\", ...props }, slots.default?.()),\n },\n });\n\n app.mount(\"#app\");\n ```\n\n Puoi anche utilizzare il tuo motore di rendering HTML:\n\n ```typescript fileName=\"main.ts\"\n import { createApp, h } from \"vue\";\n import { intlayer } from \"vue-intlayer\";\n import { intlayerHTML } from \"vue-intlayer/html\";\n import App from \"./App.vue\";\n\n const app = createApp(App);\n\n app.use(intlayer);\n app.use(intlayerHTML, {\n renderHTML: async (html) => {\n const { renderHTML } = await import('vue-intlayer/html');\n return renderHTML(html);\n },\n });\n\n app.mount(\"#app\");\n ```\n\n > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.\n\n \n \n \n ```svelte fileName=\"App.svelte\"\n \n\n \n {\n const { renderHTML } = await import('svelte-intlayer/html');\n return renderHTML(html);\n }}\n >\n \n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"preact-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n ,\n }}\n >\n {children}\n \n );\n ```\n\n Puoi anche utilizzare il tuo motore di rendering HTML:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"preact-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderHTML } = await import('preact-intlayer/html');\n return renderHTML(html);\n }}\n >\n {children}\n \n );\n ```\n\n > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.\n\n \n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"solid-intlayer/html\";\n\n export const AppProvider = (props) => (\n ,\n }}\n >\n {props.children}\n \n );\n ```\n\n Puoi anche utilizzare il tuo motore di rendering HTML:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"solid-intlayer/html\";\n\n export const AppProvider = (props) => (\n {\n const { renderHTML } = await import('solid-intlayer/html');\n return renderHTML(html);\n }}\n >\n {props.children}\n \n );\n ```\n\n > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.\n\n \n \n\n ```typescript fileName=\"app.config.ts\"\n import { createIntlayerHTMLProvider } from \"angular-intlayer/html\";\n\n export const appConfig: ApplicationConfig = {\n providers: [\n createIntlayerHTMLProvider({\n components: {\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n },\n }),\n ],\n };\n ```\n\n Puoi anche utilizzare il tuo motore di rendering HTML:\n\n ```typescript fileName=\"app.config.ts\"\n import { createIntlayerHTMLProvider } from \"angular-intlayer/html\";\n\n export const appConfig: ApplicationConfig = {\n providers: [\n createIntlayerHTMLProvider({\n renderMarkdown: async (html) => {\n const { renderMarkdown } = await import('angular-intlayer/html');\n return renderMarkdown(html);\n },\n }),\n ],\n };\n ```\n\n > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.\n\n \n \n\n---\n\n### Rendering manuale e strumenti avanzati\n\nSe hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo maggiore sulla mappatura dei componenti, usa i seguenti strumenti.\n\n\n \n #### Componente `\n {\" \n ```\n\n #### Hook `useHTMLRenderer()`\n\n Ottieni una funzione di rendering preconfigurata.\n\n ```tsx\n import { useHTMLRenderer } from \"react-intlayer/html\";\n\n const renderHTML = useHTMLRenderer({\n components: { strong: (props) => }\n });\n\n return renderHTML(\" \n \n \n #### Componente `Hello World\" />\n \n ```\n\n \n \n \n #### Componente `Hello World\" />\n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```svelte\n \n\n {@html render(\" \n \n \n #### Componente `\n {\" \n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```tsx\n import { useHTMLRenderer } from \"preact-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return \n \n \n #### Componente `\n {\" \n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```tsx\n import { useHTMLRenderer } from \"solid-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return \n \n #### Servizio `IntlayerHTMLService`\n Renderizza una stringa HTML utilizzando il servizio.\n\n ```typescript\n import { IntlayerHTMLService } from \"angular-intlayer\";\n\n export class MyComponent {\n constructor(private markdownService: IntlayerHTMLService) {}\n\n renderHTML(html: string) {\n return this.markdownService.renderMarkdown(html);\n }\n }\n ```\n\n \n \n\n---\n\n## Riferimento delle opzioni\n\nQueste opzioni possono essere passate a `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer`, e `renderHTML`.\n\n| Opzione | Tipo | Predefinito | Descrizione |\n| :----------- | :-------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------- |\n| `components` | `Record` | `{}` | Una mappa che associa tag HTML o nomi di componenti personalizzati ai componenti. |\n| `renderHTML` | `Function` | `null` | Una funzione di rendering personalizzata per sostituire completamente il parser HTML predefinito (solo per i provider Vue/Svelte). |\n\n> Nota: per React e Preact, i tag HTML standard sono forniti automaticamente. È necessario passare la prop `components` solo se si desidera sovrascriverli o aggiungere componenti personalizzati.\n","about":"Scopri come dichiarare e usare contenuti HTML con componenti personalizzati in Intlayer. Segui questa documentazione per incorporare contenuti ricchi in stile HTML con sostituzione dinamica dei componenti nel tuo progetto internazionalizzato.","url":"https://intlayer.org/it/doc/concept/content/html","datePublished":"20-01-2026","dateModified":"24-03-2026","keywords":"HTML, Componenti personalizzati, Contenuto ricco, Intlayer, Next.js, JavaScript, React, Vue, Svelte, Solid, Angular","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Sviluppatori, Manager dei contenuti"}}Il nodo
Rendering automatico (usando
Configurazione globale con
Componente
Hook
Utility
{myHtmlContent}
;\n };\n ```\n\n {myHtmlContent}
;\n };\n ```\n\n Hello World
\"}\nHello World
\");\n ```\n\n #### Utility `renderHTML()`\n\n Utility standalone per il rendering al di fuori dei componenti.\n\n ```tsx\n import { renderHTML } from \"react-intlayer/html\";\n\n const jsx = renderHTML(\"Hello
\", { components: { p: 'div' } });\n ```\n\nHello World
\")}\n ```\n\n #### Utility `renderHTML()`\n\n ```svelte\n \n\n {@html renderHTML(\"Hello World
\")}\n ```\n\nHello World
\"}\n{render(\"
;\n ```\n\n #### Utility `renderHTML()`\n\n ```tsx\n import { renderHTML } from \"preact-intlayer/html\";\n\n return Hello World
\")}{renderHTML(\"
;\n ```\n\n Hello World
\")}Hello World
\"}\n{render(\"
;\n ```\n\n #### Utility `renderHTML()`\n\n ```tsx\n import { renderHTML } from \"solid-intlayer/html\";\n\n return Hello World
\")}{renderHTML(\"
;\n ```\n\n Hello World
\")}Creazione:2026-01-20Ultimo aggiornamento:2026-03-24
Riferimento a questa documentazione al tuo assistente AI preferitoChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta
Cronologia delle versioni
- "Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"v8.5.024/03/2026
- "spostare l'importazione da {{framework}}-intlayer a {{framework}}-intlayer/html"v8.5.024/03/2026
- "Aggiunta dell'utility HTMLRenderer / useHTMLRenderer / renderHTML"v8.0.022/01/2026
- "Aggiunto il supporto per il parsing HTML"v8.0.020/01/2026
Il contenuto di questa pagina è stato tradotto con un'IA.
Vedi l'ultima versione del contenuto originale in ingleseModifica questa documentazione
Se hai un’idea per migliorare questa documentazione, non esitare a contribuire inviando una pull request su GitHub.
Collegamento GitHub alla documentazioneCopia
Copia il Markdown del documento nella porta-documenti
Contenuto HTML / HTML in Intlayer
Intlayer supporta contenuti HTML, permettendoti di incorporare contenuti ricchi e strutturati all'interno dei tuoi dizionari. Questi contenuti possono essere renderizzati con tag HTML standard o sostituiti con componenti personalizzati a runtime.
Dichiarare contenuti HTML
Puoi dichiarare contenuti HTML usando la funzione html o semplicemente come stringa.
Usa la funzione html per dichiarare esplicitamente contenuti HTML. Questo garantisce che i tag standard siano mappati correttamente anche se il rilevamento automatico è disabilitato.
htmlDictionary.content.ts
Copiare il codice
Copiare il codice nella clipboard
import { html, type Dictionary } from "intlayer";const htmlDictionary = { key: "app", contentAutoTransformation: true, // può essere impostato nel file di configurazione content: { myHtmlContent: html("<p>Ciao <strong>Mondo</strong></p>"), },} satisfies Dictionary;export default htmlDictionary;Il nodo html()
La funzione html() è una nuova funzionalità di Intlayer v8 che consente di definire esplicitamente il contenuto HTML nei dizionari. Sebbene Intlayer sia spesso in grado di rilevare automaticamente il contenuto HTML, l'uso della funzione html() offre diversi vantaggi:
- Sicurezza dei tipi: La funzione
html()consente di definire le prop attese per i componenti personalizzati, offrendo un migliore completamento automatico e controllo dei tipi nel proprio editor. - Dichiarazione esplicita: Garantisce che una stringa venga sempre trattata come HTML, anche se non contiene tag HTML standard che attiverebbero il rilevamento automatico.
- Definizione di componenti personalizzati: È possibile passare un secondo argomento a
html()per definire i componenti personalizzati e i tipi di prop attesi.
typescript
Copiare il codice
Copiare il codice nella clipboard
import { html } from "intlayer";const myContent = html( "<MyCustomComponent title='Ciao'>Mondo</MyCustomComponent>", { MyCustomComponent: { title: "string", children: "node", }, });Quando si utilizza il metodo .use() su un nodo HTML, i componenti forniti verranno controllati rispetto alla definizione fornita nella funzione html() (se disponibile).
Rendering dell'HTML
Il rendering può essere gestito automaticamente dal sistema di contenuti di Intlayer o manualmente utilizzando strumenti specializzati.
Rendering automatico (usando useIntlayer)
Quando accedi al contenuto tramite useIntlayer, i nodi HTML sono già pronti per il rendering.
I nodi HTML possono essere renderizzati direttamente come JSX. I tag standard funzionano automaticamente.
App.tsx
Copiare il codice
Copiare il codice nella clipboard
import { useIntlayer } from "react-intlayer";const AppContent = () => { const { myHtmlContent } = useIntlayer("app"); return <div>{myHtmlContent}</div>;};Usa il metodo .use() per fornire componenti personalizzati o sovrascrivere i tag:
tsx
Copiare il codice
Copiare il codice nella clipboard
{myHtmlContent.use({ p: (props) => <p className="prose" {...props} />, CustomLink: ({ children }) => <a href="/details">{children}</a>,})}Configurazione globale con HTMLProvider
Puoi configurare il rendering HTML a livello globale per l'intera applicazione. Questo è ideale per definire componenti personalizzati che dovrebbero essere disponibili in tutti i contenuti HTML.
AppProvider.tsx
Copiare il codice
Copiare il codice nella clipboard
import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => ( <HTMLProvider components={{ p: (props) => <p className="prose" {...props} />, CustomLink: ({ children }) => <a href="/details">{children}</a>, }} > {children} </HTMLProvider>);Puoi anche utilizzare il tuo motore di rendering HTML:
AppProvider.tsx
Copiare il codice
Copiare il codice nella clipboard
import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => ( <HTMLProvider renderHTML={async (html) => { const { renderHTML } = await import('react-intlayer/html'); return renderHTML(html); }} > {children} </HTMLProvider>);Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.
Rendering manuale e strumenti avanzati
Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo maggiore sulla mappatura dei componenti, usa i seguenti strumenti.
Componente <HTMLRenderer />
Esegui il rendering di una stringa HTML con componenti specifici.
tsx
Copiare il codice
Copiare il codice nella clipboard
import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}> {"<p>Hello World</p>"}</HTMLRenderer>Hook useHTMLRenderer()
Ottieni una funzione di rendering preconfigurata.
tsx
Copiare il codice
Copiare il codice nella clipboard
import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({ components: { strong: (props) => <strong {...props} className="text-red-500" /> }});return renderHTML("<p>Hello <strong>World</strong></p>");Utility renderHTML()
Utility standalone per il rendering al di fuori dei componenti.
tsx
Copiare il codice
Copiare il codice nella clipboard
import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });Riferimento delle opzioni
Queste opzioni possono essere passate a HTMLProvider, HTMLRenderer, useHTMLRenderer, e renderHTML.
Mostra tutto il contenuto della tabella
Apri la tabella in una finestra modale per visualizzare tutti i dati in modo chiaro
| Opzione | Tipo | Predefinito | Descrizione |
|---|---|---|---|
components | Record<string, any> | {} | Una mappa che associa tag HTML o nomi di componenti personalizzati ai componenti. |
renderHTML | Function | null | Una funzione di rendering personalizzata per sostituire completamente il parser HTML predefinito (solo per i provider Vue/Svelte). |
Nota: per React e Preact, i tag HTML standard sono forniti automaticamente. È necessario passare la prop components solo se si desidera sovrascriverli o aggiungere componenti personalizzati.