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:

<BrowserWindow>
Diskutieren Sie das nachfolgende Zitat:
> <CmsText id="30918f4b-8400-42d9-8e1f-f19d27357494" showActions/>

</BrowserWindow>
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" />
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={{demo: "2c0c085d-388a-48cd-9871-975bab0ffda3"}}>
    Der Text "<CmsText name="demo" />" wurde aus der Datenbank geladen.
</WithCmsText>
http://localhost:3000

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.

<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.

CC 4.0