# bx:textarea

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

```xml
<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<br>medium<br>lage<br>xlarge | \| Vorlage \| `cols` \| `rows` \| \| --- \| --- \| --- \| \| small \| 21 \| 5 \| \| medium \| 42 \| 8 \| \| large \| 63 \| 20 \| \| xlarge \| 63 \| 35 \| | Vorlage | `cols` | `rows` | small | 21 | 5 | medium | 42 | 8 | large | 63 | 20 | xlarge | 63 | 35 |
| 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<br>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<br>erweiterbar mit<br>**`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,<br>Standardwert ist hier virtual. (siehe auch<br><a href="http://de.selfhtml.org/html/formulare/eingabe.htm#bereiche_umbruch" target="_blank">SELFHTML Dokumentation</a><br>) |

### Beispiele

**Code:**

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

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

![image2015-4-10 8:17:45.png](attachments/3506265/3506274.png)

.......

![image2015-4-10 8:15:26.png](attachments/3506265/3506270.png)

**Ansicht auf der Seite:**

![image2015-4-10 8:32:55.png](attachments/3506265/3506277.png)

## Bilder mittels Platzhalter einfügen

Über den Button "Bild einfügen" in der <a href="http://wiki.batix.net/index.php/Toolbar" target="_blank">Toolbar</a> können Sie Platzhalter für Grafiken einfügen. Es besteht dann die Möglichkeit diese Platzhalter durch Bilder zu ersetzen, die in einer <a href="http://wiki.batix.net/index.php/Bx:schleife" target="_blank">Schleife</a> festgelegt sind.

Legen Sie dazu im Quelltext der Seite ein <a href="http://wiki.batix.net/index.php/Bx:schleife" target="_blank">Bx:schleife</a> Tag an, welches ein <a href="http://wiki.batix.net/index.php/Bx:bild" target="_blank">Bx:bild</a> 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 <a href="http://wiki.batix.net/index.php/Bx:bild" target="_blank">Bx:bild</a> Tags in der Schleife. Jetzt können Sie die Seite im <a href="http://wiki.batix.net/index.php/Projektmen%C3%BC" target="_blank">Projektmenü</a> 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 <a href="http://wiki.batix.net/index.php/Bx:textarea/Beispiele" target="_blank">Beispiel</a>.

### Beispiele

**Code:**

```xml
<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:**

![image2015-4-10 8:31:40.png](attachments/3506265/3506275.png)

**Auf der Seite:**

![image2015-4-10 8:32:15.png](attachments/3506265/3506276.png)

**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"**

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

**Code in Bilder-Detailseite "bilder.htm"**

```xml
...
<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"**

```xml
<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"**

```xml
<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>
```