bx:textarea

Das Tag textarea stellt in der Verwaltung ein Eingabefeld für einen beliebigen, mehrzeiligen Text zur Verfügung.

<bx:textarea.{bezeichner} [cols="<n>"] [rows="<n>"] [ small | medium | large | xlarge ] [comment="<text>"] />
<bx:textarea.{bezeichner} [maxchars="<n>" | maxwords="<n>"] [type="plain"] [encode="htmltext"] [wrap="<wrap>"] />
<bx:textarea.{bezeichner} [imgloop="<schleife>"] [imgname="<text>"] [href="<text>"] [width="<n>"] [height="<n>"] />

Auf der Webseite wird der Text unformatiert dargestellt.

cols

Breitenangabe

rows

Höhenangabe (Zeilen)

small / medium / large / xlarge

Vordefinierte Größen-Vorlagen:

Vorlage	cols	rows
small	21	5
medium	42	8
large	63	20
xlarge	63	35

comment

in der Verwaltung kann zusätzlicher Text angezeigt werden, z.B. für Erklärungen.

maxchars

nur angegebene Zeichenanzahl vom Text ausgeben z.B. für Anmoderationen gibt ganze Worte, so weit wie möglich, aus

maxwords

nur angegebene Wortanzahl vom Text ausgeben z.B. für Anmoderationen

type="plain"

erweiterter Editor für dieses Textfeld wird in der Verwaltung deaktiviert erweiterbar mit encode="htmltext"

encode="htmltext"

zeigt plain-Feld in Verwaltung aber macht <br>s im Frontend rein

wrap="wrap"

Art des Zeilenumbruchs des Textfeldes in der Verwaltung, Standardwert ist hier virtual. (siehe auch SELFHTML Dokumentation)

Beispiele

Code:

<bx:textarea.Seitentext large comment="Dieser Text steht direkt unter der Überschrift."/>

Ansicht in der Verwaltung (Formatierungen werden über den zweiten Balken oben vorgenommen):

.......

Ansicht auf der Seite:

Bilder mittels Platzhalter einfügen

Über den Button "Bild einfügen" in der Toolbar können Sie Platzhalter für Grafiken einfügen. Es besteht dann die Möglichkeit diese Platzhalter durch Bilder zu ersetzen, die in einer Schleife festgelegt sind.

Legen Sie dazu im Quelltext der Seite ein Bx:schleife Tag an, welches ein Bx:bild Tag enthält. Damit die Schleife an sich nicht auf der Webseite ausgegeben wird, setzen Sie den Parameter showmax der Schleife auf 0. Zusätzlich muss im Textfeld der Paramater imgloop spezifiziert werden. imgname beschreibt den Titel des Bx:bild Tags in der Schleife. Jetzt können Sie die Seite im Projektmenü bearbeiten und in der Schleife die gewünschten Bilder einfügen. Die Platzhalter im Text werden dann der Reihe nach durch die Bilder der Schleife ersetzt.

Um eine einheitliche Größe der Bilder festzulegen kann width und/oder height angegeben werden. Falls eine Verlinkung stattfinden soll muss der Parameter href gesetzt werden.

Deutlich wird das Ganze an einem Beispiel.

Beispiele

Code:

<bx:schleife.bilder showmax="0">
  <bx:bild.DemoBild/>
</bx:schleife.bilder>
<bx:textarea.demotextarea medium imgloop="bilder" imgname="DemoBild" width="200" height="100" />

In der Administration:

Auf der Seite:

Bilder verlinken

Durch Hinzufügen von href="bilder.htm" zum <bx:textarea>, weglassen von <bx:schleife.bilder showmax="0"> und stattdessen Erstellung eines Detail-Templates wie "bilder.htm" im nächsten Beispiel, werden die einzelnen Bilder im Text auf die jeweilige Detailseite verlinkt.

Beispiele

In diesem zweiten Beispiel ist das Bild auf eine Detailseite mit Großansicht verlinkt. In diesem Fall fällt die Definition der Schleife in der Hauptseite weg.

Die Darstellung des Bildes in der Hauptseite kann durch Textbausteine flexibler definiert werden. Hierzu wird in <bx:textarea> Parametern namens left, center und/oder right der Name eines Textbaustein-Templates zugewiesen. In diesen Templates wird nur der Ersatz-Code für den Platzhalter im Eingabefeld geschrieben. Im Beispiel-Textbaustein "Bild-links" wird nur das Bild mit umgebenden div-Tag angezeigt. Im Beispiel "Bild-rechts" wird zusätzlich eine Bildunterschrift angegeben

Code in Hauptseite "index.htm"

<bx:textarea.demotextarea medium imgloop="bilder" left="Bild-links" right="Bild-rechts" />

Code in Bilder-Detailseite "bilder.htm"

...
<bx:schleife.bilder>
  <h1><bx:text.DemoBildName/></h1>
  <bx:bild.DemoBild width="640" height="480"/>
  <bx:textarea.BildBeschreibung medium/>
</bx:schleife.bilder>
...
<bx:loop.showprevious schleife="Bilder">vorheriges Bild</bx:loop.showprevious> |
<a href="index.htm">zurück zum Artikel</a> | 
<bx:loop.shownext schleife="Bilder">nächstes Bild</bx:loop.shownext>
...

Textbaustein "Bild-links"

<div style="float:left;padding:2px">
  <a href="bilder.htm?bilder=<bx:loop.id/>"><bx:bild.DemoBild width="200" height="200"/></a>
</div>

Textbaustein "Bild-rechts"

<div style="float:right;padding:2px">
  <a href="bilder.htm?bilder=<bx:loop.id/>"><bx:bild.DemoBild width="150" height="300"/></a><br>
  <a href="bilder.htm?bilder=<bx:loop.id/>"><small><bx:text.DemoBildName/></small></a>
</div>