\n\n \n \n Svelte rendert HTML-Knoten als Strings. Verwenden Sie `{@html}`, um sie zu rendern.\n\n ```svelte\n \n\n {@html $content.myHtmlContent}\n ```\n\n \n \n Preact unterstützt HTML-Knoten direkt im 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 unterstützt HTML-Knoten direkt im 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 verwendet die `[innerHTML]`-Direktive, um HTML-Inhalte zu rendern.\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 Verwenden Sie die `.use()`-Methode, um benutzerdefinierte Komponenten bereitzustellen oder Tags zu überschreiben:\n\n ```typescript\n content().myHtmlContent.use({\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n })\n ```\n\n \n\n\n## Globale Konfiguration mit `HTMLProvider`\n\nSie können das HTML-Rendering global für Ihre gesamte Anwendung konfigurieren. Dies ist ideal, um benutzerdefinierte Komponenten zu definieren, die in allen HTML-Inhalten verfügbar sein sollen.\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 Sie können auch Ihren eigenen HTML-Renderer verwenden:\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 > Das dynamische Importieren Ihres HTML-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.\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 Sie können auch Ihren eigenen HTML-Renderer verwenden:\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 > Das dynamische Importieren Ihres HTML-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.\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 Sie können auch Ihren eigenen HTML-Renderer verwenden:\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 > Das dynamische Importieren Ihres HTML-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.\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 Sie können auch Ihren eigenen HTML-Renderer verwenden:\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 > Das dynamische Importieren Ihres HTML-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.\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 Sie können auch Ihren eigenen HTML-Renderer verwenden:\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 > Das dynamische Importieren Ihres HTML-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.\n\n \n \n\n---\n\n### Manuelles Rendering & Erweiterte Tools\n\nWenn Sie rohe HTML-Strings rendern müssen oder mehr Kontrolle über die Komponentenzuordnung benötigen, verwenden Sie die folgenden Tools.\n\n\n \n #### `\n {\" \n ```\n\n #### `useHTMLRenderer()` Hook\n\n Holen Sie sich eine vorkonfigurierte Renderer-Funktion.\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 #### `Hello World\" />\n \n ```\n\n \n \n \n #### `Hello World\" />\n ```\n\n #### `useHTMLRenderer()` Hook\n\n ```svelte\n \n\n {@html render(\" \n \n \n #### `\n {\" \n ```\n\n #### `useHTMLRenderer()` Hook\n\n ```tsx\n import { useHTMLRenderer } from \"preact-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return \n \n \n #### `\n {\" \n ```\n\n #### `useHTMLRenderer()` Hook\n\n ```tsx\n import { useHTMLRenderer } from \"solid-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return \n \n #### `IntlayerHTMLService` Service\n Rendern Sie einen HTML-String mit dem Service.\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## Optionen-Referenz\n\nDiese Optionen können an `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer` und `renderHTML` übergeben werden.\n\n| Option | Typ | Standard | Beschreibung |\n| :----------- | :-------------------- | :------- | :----------------------------------------------------------------------------------------------------------------------------- |\n| `components` | `Record` | `{}` | Eine Map von HTML-Tags oder benutzerdefinierten Komponentennamen zu Komponenten. |\n| `renderHTML` | `Function` | `null` | Eine benutzerdefinierte Rendering-Funktion, um den Standard-HTML-Parser vollständig zu ersetzen (Nur für Vue/Svelte Provider). |\n\n> Hinweis: Für React und Preact werden Standard-HTML-Tags automatisch bereitgestellt. Sie müssen das `components`-Prop nur übergeben, wenn Sie sie überschreiben oder benutzerdefinierte Komponenten hinzufügen möchten.\n","about":"Erfahren Sie, wie Sie HTML-Inhalte deklarieren und mit benutzerdefinierten Komponenten in Intlayer verwenden. Folgen Sie dieser Dokumentation, um reichhaltige HTML-ähnliche Inhalte mit dynamischem Komponentenersatz in Ihrem internationalisierten Projekt einzubetten.","url":"https://intlayer.org/de/doc/concept/content/html","datePublished":"20-01-2026","dateModified":"24-03-2026","keywords":"HTML, Benutzerdefinierte Komponenten, Reicher Inhalt, Intlayer, Next.js, JavaScript, React, Vue, Svelte","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Entwickler, Inhaltsmanager"}}Der
Automatisches Rendern (mit
Globale Konfiguration mit
{myHtmlContent}
;\n };\n ```\n\n {myHtmlContent}
;\n };\n ```\n\n Hello World
\"}\nHello World
\");\n ```\n\n #### `renderHTML()` Utility\n\n Eigenständiges Utility zum Rendern außerhalb von Komponenten.\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 #### `renderHTML()` Utility\n\n ```svelte\n \n\n {@html renderHTML(\"Hello World
\")}\n ```\n\nHello World
\"}\n{render(\"
;\n ```\n\n #### `renderHTML()` Utility\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 #### `renderHTML()` Utility\n\n ```tsx\n import { renderHTML } from \"solid-intlayer/html\";\n\n return Hello World
\")}{renderHTML(\"
;\n ```\n\n Hello World
\")}Erstellung:2026-01-20Letzte Aktualisierung:2026-03-24
Referenzieren Sie diese Dokumentation mit Ihrem bevorzugten AI-AssistentenChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
Stellen Sie Ihre Frage und erhalten Sie einen Resümee des Dokuments, indem Sie diese Seite und den AI-Anbieter Ihrer Wahl referenzieren
Versionshistorie
- "Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"v8.5.024.3.2026
- "Import von {{framework}}-intlayer nach {{framework}}-intlayer/html verschieben"v8.5.024.3.2026
- "Hinzufügen von HTMLRenderer / useHTMLRenderer / renderHTML Utility"v8.0.022.1.2026
- "Hinzufügen von HTML-Parsing-Unterstützung"v8.0.020.1.2026
Der Inhalt dieser Seite wurde mit einer KI übersetzt.
Den englischen Originaltext ansehenDiese Dokumentation bearbeiten
Wenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.
GitHub-Link zur DokumentationKopieren
Markdown des Dokuments in die Zwischenablage kopieren
HTML-Inhalte / HTML in Intlayer
Intlayer unterstützt HTML-Inhalte, sodass Sie reichhaltige, strukturierte Inhalte in Ihre Dictionaries einbetten können. Diese Inhalte können mit Standard-HTML-Tags gerendert oder zur Laufzeit durch benutzerdefinierte Komponenten ersetzt werden.
HTML-Inhalte deklarieren
Sie können HTML-Inhalte mit der html-Funktion oder einfach als String deklarieren.
Verwenden Sie die html-Funktion, um HTML-Inhalte explizit zu deklarieren. Dies stellt sicher, dass Standard-Tags korrekt zugeordnet werden, selbst wenn die automatische Erkennung deaktiviert ist.
htmlDictionary.content.ts
Code kopieren
Kopieren Sie den Code in die Zwischenablage
import { html, type Dictionary } from "intlayer";const htmlDictionary = { key: "app", contentAutoTransformation: true, // kann in der Konfigurationsdatei festgelegt werden content: { myHtmlContent: html("<p>Hello <strong>World</strong></p>"), },} satisfies Dictionary;export default htmlDictionary;Der html()-Knoten
Die html()-Funktion ist ein neues Feature in Intlayer v8, mit dem Sie HTML-Inhalte in Ihren Wörterbüchern explizit definieren können. Während Intlayer HTML-Inhalte oft automatisch erkennt, bietet die Verwendung der html()-Funktion mehrere Vorteile:
- Typsicherheit: Mit der
html()-Funktion können Sie die erwarteten Props für benutzerdefinierte Komponenten definieren, was eine bessere Autovervollständigung und Typprüfung in Ihrem Editor ermöglicht. - Explizite Deklaration: Sie stellt sicher, dass eine Zeichenfolge immer als HTML behandelt wird, auch wenn sie keine Standard-HTML-Tags enthält, die die automatische Erkennung auslösen würden.
- Definition benutzerdefinierter Komponenten: Sie können ein zweites Argument an
html()übergeben, um die benutzerdefinierten Komponenten und deren erwartete Prop-Typen zu definieren.
typescript
Code kopieren
Kopieren Sie den Code in die Zwischenablage
import { html } from "intlayer";const myContent = html( "<MyCustomComponent title='Hallo'>Welt</MyCustomComponent>", { MyCustomComponent: { title: "string", children: "node", }, });Wenn Sie die Methode .use() auf einem HTML-Knoten verwenden, werden die von Ihnen bereitgestellten Komponenten gegen die in der html()-Funktion bereitgestellte Definition (falls verfügbar) geprüft.
HTML rendern
Das Rendern kann automatisch durch das Inhaltssystem von Intlayer oder manuell mit spezialisierten Tools erfolgen.
Automatisches Rendern (mit useIntlayer)
Wenn Sie auf Inhalte über useIntlayer zugreifen, sind HTML-Knoten bereits für das Rendering vorbereitet.
HTML-Knoten können direkt als JSX gerendert werden. Standard-Tags funktionieren automatisch.
App.tsx
Code kopieren
Kopieren Sie den Code in die Zwischenablage
import { useIntlayer } from "react-intlayer";const AppContent = () => { const { myHtmlContent } = useIntlayer("app"); return <div>{myHtmlContent}</div>;};Verwenden Sie die .use()-Methode, um benutzerdefinierte Komponenten bereitzustellen oder Tags zu überschreiben:
tsx
Code kopieren
Kopieren Sie den Code in die Zwischenablage
{myHtmlContent.use({ p: (props) => <p className="prose" {...props} />, CustomLink: ({ children }) => <a href="/details">{children}</a>,})}Globale Konfiguration mit HTMLProvider
Sie können das HTML-Rendering global für Ihre gesamte Anwendung konfigurieren. Dies ist ideal, um benutzerdefinierte Komponenten zu definieren, die in allen HTML-Inhalten verfügbar sein sollen.
AppProvider.tsx
Code kopieren
Kopieren Sie den Code in die Zwischenablage
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>);Sie können auch Ihren eigenen HTML-Renderer verwenden:
AppProvider.tsx
Code kopieren
Kopieren Sie den Code in die Zwischenablage
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>);Das dynamische Importieren Ihres HTML-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.
Manuelles Rendering & Erweiterte Tools
Wenn Sie rohe HTML-Strings rendern müssen oder mehr Kontrolle über die Komponentenzuordnung benötigen, verwenden Sie die folgenden Tools.
<HTMLRenderer /> Komponente
Rendern Sie einen HTML-String mit spezifischen Komponenten.
tsx
Code kopieren
Kopieren Sie den Code in die Zwischenablage
import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}> {"<p>Hello World</p>"}</HTMLRenderer>useHTMLRenderer() Hook
Holen Sie sich eine vorkonfigurierte Renderer-Funktion.
tsx
Code kopieren
Kopieren Sie den Code in die Zwischenablage
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>");renderHTML() Utility
Eigenständiges Utility zum Rendern außerhalb von Komponenten.
tsx
Code kopieren
Kopieren Sie den Code in die Zwischenablage
import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });Optionen-Referenz
Diese Optionen können an HTMLProvider, HTMLRenderer, useHTMLRenderer und renderHTML übergeben werden.
Alle Tabellendaten anzeigen
Tabelle in einem Modal öffnen, um alle Daten übersichtlich anzuzeigen
| Option | Typ | Standard | Beschreibung |
|---|---|---|---|
components | Record<string, any> | {} | Eine Map von HTML-Tags oder benutzerdefinierten Komponentennamen zu Komponenten. |
renderHTML | Function | null | Eine benutzerdefinierte Rendering-Funktion, um den Standard-HTML-Parser vollständig zu ersetzen (Nur für Vue/Svelte Provider). |
Hinweis: Für React und Preact werden Standard-HTML-Tags automatisch bereitgestellt. Sie müssen das components-Prop nur übergeben, wenn Sie sie überschreiben oder benutzerdefinierte Komponenten hinzufügen möchten.