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 lage xlarge	| Vorlage | cols | rows | | --- | --- | --- | | small | 21 | 5 | | medium | 42 | 8 | | large | 63 | 20 | | xlarge | 63 | 35 |
Vorlage	cols
small	21
medium	42
large	63
xlarge	63
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 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>