Creation:2026-01-20Last update:2026-03-24

Referenzieren Sie diese Dokumentation mit Ihrem bevorzugten AI-Assistenten

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

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 ansehen

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

HTML-Inhalte / HTML in Intlayer

Name: Intlayer
Author: 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;

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;

Wenn der String gängige HTML-Tags enthält (z. B. <p>, <div>, <strong> usw.), wird Intlayer ihn automatisch umwandeln.

htmlDictionary.content.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

export default {  key: "app",  contentAutoTransformation: true, // kann in der Konfigurationsdatei festgelegt werden  content: {    myHtmlContent:  "<p>Hello <strong>World</strong></p>",  },};

export default {  key: "app",  contentAutoTransformation: true, // kann in der Konfigurationsdatei festgelegt werden  content: {    myHtmlContent:  "<p>Hello <strong>World</strong></p>",  },};

Importieren Sie HTML-Inhalte aus Dateien. Beachten Sie, dass die Funktion file() derzeit einen String zurückgibt, der automatisch als HTML erkannt wird, wenn er Tags enthält.

htmlDictionary.content.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { html, file, t } from "intlayer";export default {  key: "app",  content: {    content: t({      en: html(file("./content.en.html")),      fr: html(file("./content.fr.html")),    }),  },};

import { html, file, t } from "intlayer";export default {  key: "app",  content: {    content: t({      en: html(file("./content.en.html")),      fr: html(file("./content.fr.html")),    }),  },};

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",    },  });

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>;};

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>,})}

{myHtmlContent.use({  p: (props) => <p className="prose" {...props} />,  CustomLink: ({ children }) => <a href="/details">{children}</a>,})}

In Vue können HTML-Inhalte mit der integrierten component-Komponente gerendert werden.

App.vue

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template>  <component :is="myHtmlContent" /></template>

<script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template>  <component :is="myHtmlContent" /></template>

Verwenden Sie .use() für Overrides:

vue

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<component :is="myHtmlContent.use({ h1: 'h2' })" />

<component :is="myHtmlContent.use({ h1: 'h2' })" />

Svelte rendert HTML-Knoten als Strings. Verwenden Sie {@html}, um sie zu rendern.

svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("app");</script>{@html $content.myHtmlContent}

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("app");</script>{@html $content.myHtmlContent}

Preact unterstützt HTML-Knoten direkt im JSX.

App.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useIntlayer } from "preact-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

import { useIntlayer } from "preact-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

Solid unterstützt HTML-Knoten direkt im JSX.

App.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { useIntlayer } from "solid-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

import { useIntlayer } from "solid-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

Angular verwendet die [innerHTML]-Direktive, um HTML-Inhalte zu rendern.

app.component.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-root",  template: `<div [innerHTML]="content().myHtmlContent"></div>`,})export class AppComponent {  content = useIntlayer("app");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-root",  template: `<div [innerHTML]="content().myHtmlContent"></div>`,})export class AppComponent {  content = useIntlayer("app");}

Verwenden Sie die .use()-Methode, um benutzerdefinierte Komponenten bereitzustellen oder Tags zu überschreiben:

typescript

Code kopieren

Kopieren Sie den Code in die Zwischenablage

content().myHtmlContent.use({  p: { class: "prose" },  CustomLink: { href: "/details" },})

content().myHtmlContent.use({  p: { class: "prose" },  CustomLink: { href: "/details" },})

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>);

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>);

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.

main.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, {  components: {    p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),    CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),  },});app.mount("#app");

import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, {  components: {    p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),    CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),  },});app.mount("#app");

Sie können auch Ihren eigenen HTML-Renderer verwenden:

main.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, {  renderHTML: async (html) => {    const { renderHTML } = await import('vue-intlayer/html');    return renderHTML(html);  },});app.mount("#app");

import { createApp, h } from "vue";import { intlayer } from "vue-intlayer";import { intlayerHTML } from "vue-intlayer/html";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerHTML, {  renderHTML: async (html) => {    const { renderHTML } = await import('vue-intlayer/html');    return renderHTML(html);  },});app.mount("#app");

Das dynamische Importieren Ihres HTML-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.

App.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider>

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider>

Sie können auch Ihren eigenen HTML-Renderer verwenden:

App.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html"; </script> <HTMLProvider   renderHTML={async (html) => {     const { renderHTML } = await import('svelte-intlayer/html');     return renderHTML(html);   }} >   <slot /> </HTMLProvider>

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html"; </script> <HTMLProvider   renderHTML={async (html) => {     const { renderHTML } = await import('svelte-intlayer/html');     return renderHTML(html);   }} >   <slot /> </HTMLProvider>

> Das dynamische Importieren Ihres HTML

-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.

AppProvider.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

 import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {children}   </HTMLProvider> );

 import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {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 "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     renderHTML={async (html) => {       const { renderHTML } = await import('preact-intlayer/html');       return renderHTML(html);     }}   >     {children}   </HTMLProvider> );

 import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     renderHTML={async (html) => {       const { renderHTML } = await import('preact-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.

AppProvider.tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

 import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {props.children}   </HTMLProvider> );

 import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {props.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 "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     renderHTML={async (html) => {       const { renderHTML } = await import('solid-intlayer/html');       return renderHTML(html);     }}   >     {props.children}   </HTMLProvider> );

 import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     renderHTML={async (html) => {       const { renderHTML } = await import('solid-intlayer/html');       return renderHTML(html);     }}   >     {props.children}   </HTMLProvider> );

> Das dynamische Importieren Ihres HTML

-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.

app.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      components: {        p: { class: "prose" },        CustomLink: { href: "/details" },      },    }),  ],};

import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      components: {        p: { class: "prose" },        CustomLink: { href: "/details" },      },    }),  ],};

Sie können auch Ihren eigenen HTML-Renderer verwenden:

app.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      renderMarkdown: async (html) => {        const { renderMarkdown } = await import('angular-intlayer/html');        return renderMarkdown(html);      },    }),  ],};

import { createIntlayerHTMLProvider } from "angular-intlayer/html";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerHTMLProvider({      renderMarkdown: async (html) => {        const { renderMarkdown } = await import('angular-intlayer/html');        return renderMarkdown(html);      },    }),  ],};

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>

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>");

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' } });

import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });

####

<HTMLRenderer /> Komponente

vue

Code kopieren

Kopieren Sie den Code in die Zwischenablage

 <script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template>   <HTMLRenderer content="<p>Hello World</p>" /> </template>

 <script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template>   <HTMLRenderer content="<p>Hello World</p>" /> </template>

`<HTMLRenderer />` Komponente

svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script lang="ts">import { HTMLRenderer } from "svelte-intlayer/html";</script><HTMLRenderer value="<p>Hello World</p>" />

<script lang="ts">import { HTMLRenderer } from "svelte-intlayer/html";</script><HTMLRenderer value="<p>Hello World</p>" />

`useHTMLRenderer()` Hook

svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script lang="ts">import { useHTMLRenderer } from "svelte-intlayer/html";const render = useHTMLRenderer();</script>{@html render("<p>Hello World</p>")}

<script lang="ts">import { useHTMLRenderer } from "svelte-intlayer/html";const render = useHTMLRenderer();</script>{@html render("<p>Hello World</p>")}

`renderHTML()` Utility

svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>Hello World</p>")}

<script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>Hello World</p>")}

####

<HTMLRenderer /> Komponente

tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

 import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

 import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

####

useHTMLRenderer() Hook

tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

 import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

 import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

####

renderHTML() Utility

tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

 import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

 import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

####

<HTMLRenderer /> Komponente

tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

 import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

 import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

####

useHTMLRenderer() Hook

tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

 import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

 import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

####

renderHTML() Utility

tsx

Code kopieren

Kopieren Sie den Code in die Zwischenablage

 import { renderHTML } from "solid-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

 import { renderHTML } from "solid-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

`IntlayerHTMLService` Service

Rendern Sie einen HTML-String mit dem Service.

typescript

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { IntlayerHTMLService } from "angular-intlayer";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderMarkdown(html);  }}

import { IntlayerHTMLService } from "angular-intlayer";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderMarkdown(html);  }}

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.

Markdown

Funktionsabruf

Versionshistorie

HTML-Inhalte / HTML in Intlayer

HTML-Inhalte deklarieren

Der html()-Knoten

HTML rendern

Automatisches Rendern (mit useIntlayer)

Globale Konfiguration mit HTMLProvider

Manuelles Rendering & Erweiterte Tools

<HTMLRenderer /> Komponente

useHTMLRenderer() Hook

renderHTML() Utility

Optionen-Referenz

Der `html()`-Knoten

Automatisches Rendern (mit `useIntlayer`)

Globale Konfiguration mit `HTMLProvider`

`<HTMLRenderer />` Komponente

`useHTMLRenderer()` Hook

`renderHTML()` Utility