Nicht eigenloggt

Sie sind nicht eingeloggt. Wenn Sie ohne Login fortfahren, wird Ihr Fortschritt nicht gespeichert.

Jetzt einloggen
Zum Hauptinhalt springen

CMS Text

Soll ein bestimmter Wert nicht fix im Markdown hinterlegt, sondern aus der Datenbank geladen werden, eignet sich die Komponente <CmsText>.

Ein möglicher Anwendungsfall ist die Bereitstellung individualisierter Informationen (z.B. Noten, Prüfungsfragen, ...).

Erstellung von Documents

Im Gegensatz zu vielen anderen Komponenten erstellen die Komponenten rund um CMS-Text bewusst nicht automatisch ein Document, wenn keins vorhanden ist.

Diese Gallery-Page ist so aufgesetzt, dass für einige DocumentRoot-IDs automatisch ein CmsText-Document erzeugt wird:

30918f4b
Inhalt: "CMS-Text aus der Datenbank 📚"
UUID: 30918f4b-8400-42d9-8e1f-f19d27357494
f6b64809
Inhalt: print('Hello CMS Code!')
UUID: f6b64809-e570-4a88-9a84-6c57e0240e38
a859498b
Inhalt: #cms-link
UUID: a859498b-aab2-4ce8-baa2-1feb1d623571

Für die ID 2c0c085d-388a-48cd-9871-975bab0ffda3 wird kein Document erstellt.

Implementierung

Das Dokument wird hier im .mdx wie folgt erzeugt:

export const DocumentCreator = observer(() => {
    useFirstMainDocument('30918f4b-8400-42d9-8e1f-f19d27357494', new CmsTextMeta({
        default: 'CMS-Text aus der Datenbank 📚'
    }));
    useFirstMainDocument('f6b64809-e570-4a88-9a84-6c57e0240e38', new CmsTextMeta({
        default: `print('Hello CMS Code!')`
    }));
    useFirstMainDocument('a859498b-aab2-4ce8-baa2-1feb1d623571', new CmsTextMeta({
        default: `#cms-link`
    }));
    return null;
});
<DocumentCreator />

Inline-Text aus dem CMS​

import CmsText from '@tdev-components/documents/CmsText';

Der Text "<CmsText id="30918f4b-8400-42d9-8e1f-f19d27357494"/>" wurde aus der Datenbank geladen.
http://localhost:3000

Der Text "" wurde aus der Datenbank geladen.

Besitzt der aktuelle User kein Document für die angegebene DocumentRoot-ID, dann bleibt der Text leer:

Der Text "<CmsText id="2c0c085d-388a-48cd-9871-975bab0ffda3"/>" wurde aus der Datenbank geladen.
http://localhost:3000

Der Text "" wurde aus der Datenbank geladen.

CMS-Text mit Permissions Panel​

CMS Text kann auch nützlich sein, um bspw. Prüfungsinhalte erst zur gegebenen Zeit mit einer Shared Permission anzuzeigen. Das Permissions Panel kann deshalb optional angezeigt werden:

import CmsText from '@tdev-components/documents/CmsText';

Diskutieren Sie das nachfolgende Zitat:

> <CmsText id="30918f4b-8400-42d9-8e1f-f19d27357494" showActions/>
http://localhost:3000

Diskutieren Sie das nachfolgende Zitat:

CMS Code​

Es können auch Code-Blöcke aus dem CMS geladen werden:

import CmsCode from '@tdev-components/documents/CmsText/Code';

<CmsCode 
    id="f6b64809-e570-4a88-9a84-6c57e0240e38"
    codeBlockProps={{
        language: 'python'
    }}
/>
<CmsCode 
    id="f6b64809-e570-4a88-9a84-6c57e0240e38"
    codeBlockProps={{
        language: 'python'
    }}
    showActions
/>
`codeBlockProps` entspricht den Props der Komponente `@theme/CodeBlock`.
<CmsCode 
    id="f6b64809-e570-4a88-9a84-6c57e0240e38"
    codeBlockProps={{
        language: 'python',
        showLineNumbers: true,
        title: 'Hello World'
    }}
    showActions
/>
http://localhost:3000

codeBlockProps entspricht den Props der Komponente @theme/CodeBlock.

Es ist möglich, CMS-Texte als Links zu verwenden:

import CmsLink from '@tdev-components/documents/CmsText/Link';

Ohne Link-Text: <CmsLink id="a859498b-aab2-4ce8-baa2-1feb1d623571" />
<CmsLink id="a859498b-aab2-4ce8-baa2-1feb1d623571">
    👉 Hier gehts zur Prüfung
</CmsLink>

Mit Bedienelement: <CmsLink showActions id="a859498b-aab2-4ce8-baa2-1feb1d623571" inline />
http://localhost:3000

Ohne Link-Text:

Mit Bedienelement

Einfluss auf umliegende Elemente​

In vielen Fällen kann es nützlich sein, auch umliegende Elemente nur dann anzuzeigen, wenn ein bestimmter CMS-Text verfügbar ist. Dazu kann die Komponente <WithCmsText> verwendet werden.

<WithCmsText entries={{demo: "30918f4b-8400-42d9-8e1f-f19d27357494"}}>
    Der Text "<CmsText name="demo" />" wurde aus der Datenbank geladen.
</WithCmsText>
http://localhost:3000

Ist einer der in entries aufgeführten CMS-Texte nicht verfügbar, wird der gesamte Inhalt dieser Klammer ausgeblendet:

<WithCmsText entries={{text: "2c0c085d-388a-48cd-9871-975bab0ffda3"}}>
    Der Text "<CmsText name="demo" />" wurde aus der Datenbank geladen.
</WithCmsText>
http://localhost:3000
Beachte

Die Einträge text und demo stimmen nicht überein, deshalb wird der Inhalt nie angezeigt.

Anwendungsbeispiele​

Im folgenden Beispiel wird die gesamte <DefinitionList> nur dann angezeigt, wenn der Eintrag für die DocumentRoot-ID 30918f4b-8400-42d9-8e1f-f19d27357494 vorhanden ist. In dem Fall steht der entsprechende CMS-Text innerhalb der <WithCmsText>-Klammer unter dem Namen demo zur Verfügung.

Zusätzlich wird ein weiterer CMS-Text mit der ID 2c0c085d-388a-48cd-9871-975bab0ffda3 verwendet. Wenn dort das entsprechende Dokument fehlt, bleibt der Eintrag einfach leer.

import WithCmsText from '@tdev-components/documents/CmsText/WithCmsText';
import CmsText from '@tdev-components/documents/CmsText';
import DefinitionList from "@tdev-components/DefinitionList";

<WithCmsText 
    entries={{
        demo: "30918f4b-8400-42d9-8e1f-f19d27357494", 
        code: "f6b64809-e570-4a88-9a84-6c57e0240e38"
    }}
>
    <DefinitionList>
        <dt>Hallo</dt>
        <dd>Das ist der erste Eintrag.</dd>
        <dt>Welt</dt>
        <dd>Das ist der zweite Eintrag.</dd>
        <dt>CMS-Eintrag</dt>
        <dd><CmsText name="demo" /></dd>
        <dt>CMS-Code</dt>
        <dd><CmsCode name="code" codeBlockProps={{language: 'py'}} showActions /></dd>
        <dt>Anderer CMS-Eintrag</dt>
        <dd><CmsText id="2c0c085d-388a-48cd-9871-975bab0ffda3" /></dd>
    </DefinitionList>
</WithCmsText>
http://localhost:3000

Bei mehreren Einträgen zeigt die <WithCmsText>-Klammer ihren Inhalt nur dann an, wenn alle entsprechenden Documents vorhanden sind:

<WithCmsText 
    entries={{
        a: "30918f4b-8400-42d9-8e1f-f19d27357494",
        b: "2c0c085d-388a-48cd-9871-975bab0ffda3"
    }}
>
    <DefinitionList>
        <dt>Hallo</dt>
        <dd>Das ist der erste Eintrag.</dd>
        <dt>Welt</dt>
        <dd>Das ist der zweite Eintrag.</dd>
        <dt>CMS-Eintrag</dt>
        <dd><CmsText name="a" /></dd>
        <dt>Anderer CMS-Eintrag</dt>
        <dd><CmsText name="b" /></dd>
    </DefinitionList>
</WithCmsText>
http://localhost:3000

<WithCmsText>-Klammern können auch verschachtelt genutzt werden:

<WithCmsText entries={{demo: "30918f4b-8400-42d9-8e1f-f19d27357494"}}>
    <DefinitionList>
        <dt>Hallo</dt>
        <dd>Das ist der erste Eintrag.</dd>
        <dt>Welt</dt>
        <dd>Das ist der zweite Eintrag.</dd>
        <dt>CMS-Eintrag</dt>
        <dd><CmsText name="demo" /></dd>
        <WithCmsText entries={{demo: "2c0c085d-388a-48cd-9871-975bab0ffda3"}}>
            <dt>Anderer CMS-Eintrag</dt>
            <dd><CmsText name="demo" /></dd>
        </WithCmsText>
    </DefinitionList>
</WithCmsText>
http://localhost:3000

CMS-Texte hochladen​

Beim WithCmsText wird standardmässig ein Upload-Formular für Admins angezeigt. Es können CMS-TExte aus Excel-Dateien oder aus Code-Blöcken erstellt werden. Dieses Formular ermöglicht das Hochladen von Texten für die angegebene DocumentRootId (oder im Falle eines WithCmsTexts auch für mehrere DocumentRootIds). Für einzelne CMS-Texte kann das Formular mit showActions angezeigt werden.

Die CMS-Texte werden "im Namen des Users" erstellt, d.h. der User, der das Formular ausfüllt, wird als Autor des CMS-Textes gesetzt.

Berechtingungen

CMS-Texte sollten grundsätzlich als Read Only hinterlegt werden, da sonst findige User:innen die Dokumente verändern könnten (authorId wird auf den User gesetzt, also ist bei RW ein PUT /api/documents/:id erlaubt).

Im Beispiel unten können die CMS-Texte demo und code hochgeladen werden und die Berechtigungen sowohl für alle CMS-Texte als auch für die einzelnen Texte angezeigt und verändert werden:

<WithCmsText 
    entries={{
        demo: "30918f4b-8400-42d9-8e1f-f19d27357494", 
        code: "f6b64809-e570-4a88-9a84-6c57e0240e38"
    }}
>
    CMS-Eintrag
    : <CmsText name="demo" showActions/>
    CMS-Code
    : <CmsCode name="code" codeBlockProps={{language: 'py'}} showActions/>
</WithCmsText>
http://localhost:3000
Anmerkung: hideActions

Das Berechtigungs- und Hochlade-Panel kann mit hideActions ausgeblendet werden.