✎ wrap-Plugin: weitergehende Gestaltungsmöglichkeiten [Umweltschuzzug WIKI]

<h1 class="page-header pb-3 mb-4 mt-5"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" role="presentation" class="iconify mr-2"><path d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m9 16v-2H6v2h9m3-4v-2H6v2h12z"/></svg> wrap-Plugin: weitergehende Gestaltungsmöglichkeiten</h1>
<div class="level1">

<p>
Das Wrap-Plugin bietet weitergehende Gestaltungsmöglichkeiten gegenüber dem Standard-DokuWiki-Editor bzw. dem CKG-Editor. Das wrap-Plugin ist in der Standardinstallation des Einsatzleiterwikis bereits enthalten und kann genutzt werden.
</p>

<p>
Beachten Sie, dass die auf dieser Seite genannten Kommandos im ckgedit-Editor nicht direkt angezeigt und erst nach dem Speichern sichtbar werden. Daher empfiehlt sich für die Nutzung dieser Kommandos die Nutzung des Standard-DokuWiki-Editors, da hier mit einem Klick auf den <em>Vorschau</em>-Button die Seite bereits so angezeigt werden kann, wie sie nach dem Speichern aussehen wird.
</p>

</div>

<h2 class="page-header pb-3 mb-4 mt-5">Grundlegender Syntax</h2>
<div class="level2">

<p>
Ein großgeschriebenes <b>&lt;nowiki>&#60;WRAP&#62;&lt;/nowiki></b> erzeugt ein sogenanntes <b><code>div</code></b> und sollte für <b>große</b> Boxen, <b>komplette</b> Absätze, Listen, Tabellen, etc. genutzt werden.
</p>
<pre class="code">&lt;WRAP weitere_Optionen Breite>
"größerer" Inhalt
&lt;/WRAP>

</pre><p> </p>

<p>
Ein kleingeschriebenes <b>&lt;nowiki>&#60;wrap&#62;&lt;/nowiki></b> erzeugt ein sogenannten <b><code>span</code></b> und sollte für <b>kleine</b> Boxen, <b>einzelne Worte</b> in Absätzen, Listen, Tabellen, etc. genutzt werden.
</p>
<pre class="code">&lt;wrap weitere_Optionen Breite>"kleinerer" Inhalt&lt;/wrap>

</pre><p> </p>

<p>
<img src="/lib/images/smileys/icon_exclaim.gif" class="icon" alt=":!:" /> Beachten Sie, dass <b>nicht alle unten genannten Funktionen mit kleingeschriebenem wrap funktionieren</b>:
</p>
<ul class="fix-media-list-overlap">
<li class="level1"> <b>Ausrichtungen</b> (links, mittig, rechts)</li>
<li class="level1"> <b>mehrspaltige Layouts</b></li>
<li class="level1"> und <b>Breitenangaben</b></li>
</ul>

<p>
wenn das zugehörige wrap nicht ebenfalls umflossen wird.
</p>

</div>

<h2 class="page-header pb-3 mb-4 mt-5">Klassen und Stile</h2>
<div class="level2">

</div>

<h3 class="page-header pb-3 mb-4 mt-5">Spalten und Umfließungen</h3>
<div class="level3">

<p>
Sie können Spalten erstellen, indem Sie einfach die Klasse (das Kommando) <code>column</code> und eine Breite angeben:
</p>
<pre class="code">&lt;WRAP column 30%>...Inhalt...&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP column 30%>
Dieser Text befindet sich in der <b>ersten</b> Spalte von drei Spalten mit jeweils 30% Breite.
&lt;/WRAP>
</p>

<p>
&lt;WRAP column 30%>
Dieser Text befindet sich in der <b>zweiten</b> Spalte von drei Spalten mit jeweils 30% Breite.
&lt;/WRAP>
</p>

<p>
&lt;WRAP column 30%>
Dieser Text befindet sich in der <b>dritten</b> Spalte von drei Spalten mit jeweils 30% Breite.
&lt;/WRAP>
</p>
<pre class="code">&lt;WRAP column 30%&gt;
Dieser Text befindet sich in der **ersten** Spalte von drei Spalten mit jeweils 30% Breite.
&lt;/WRAP&gt;

&lt;WRAP column 30%&gt;
Dieser Text befindet sich in der **zweiten** Spalte von drei Spalten mit jeweils 30% Breite.
&lt;/WRAP&gt;

&lt;WRAP column 30%&gt;
Dieser Text befindet sich in der **dritten** Spalte von drei Spalten mit jeweils 30% Breite.
&lt;/WRAP&gt;

</pre><p> </p>

</div>

<h4>Verschiedene Umfließungen</h4>
<div class="level4">

<p>
Normalerweise ist die Angabe <code>column</code> ausreichend, aber für anspruchsvollere Zwecke (nicht nur für Spalten sondern auch für andere Klassen wie <a href="#boxen_und_notizen" title="wiki:hilfe:plugins:standard:wrap ↵" class="wikilink1">Boxen und Notizen</a>) gibt es verschiedene Arten für Umfließungen:
</p>
<ul class="fix-media-list-overlap">
<li class="level1"> <b><code>column</code></b> bewirkt das selbe wie <code>left</code></li>
<li class="level1"> <b><code>left</code></b> wird den WRAP-Block auf die linke Seite positionieren und den weiteren Inhalt rechts daneben platzieren</li>
<li class="level1"> <b><code>right</code></b> wird den WRAP-Block auf die rechte Seite positionieren und den weiteren Inhalt links daneben platzieren</li>
<li class="level1"> <b><code>center</code></b> wird den WRAP-Block horizontal mittig zentrieren</li>
</ul>

</div>

<h4>Breiten</h4>
<div class="level4">

<p>
Sie können eine beliebige gültige Breitenanangabe nutzen (aber nur bei WRAP). Gültige Breitenangaben können in folgenden Maßeinheiten angegeben werden: <code>%, px, em, ex, pt, pc, cm, mm, in</code>. Die meistgenutzten Abgaben sind:
</p>

<span class='np_break'> </span>
<div class="table-responsive"><table class="inline table table-striped table-condensed">
	<thead>
	<tr class="row0">
		<th class="col0">Maßeinheit</th><th class="col1">Wert</th><th class="col2">Beschreibung</th>
	</tr>
	</thead>
	<tr class="row1">
		<th class="col0"><code>%</code></th><td class="col1"><code>30%</code></td><td class="col2">passt sich dynamisch an</td>
	</tr>
	<tr class="row2">
		<th class="col0"><code>px</code></th><td class="col1"><code>420px</code></td><td class="col2">definiert eine feste Breite</td>
	</tr>
	<tr class="row3">
		<th class="col0"><code>em</code></th><td class="col1"><code>20em</code></td><td class="col2">passt sich ebenfalls dynamisch an, allerdings in Abhängigkeit der Schriftgröße</td>
	</tr>
</table>
<span class='np_break'> </span>
</div>
<p>
Eine Tabelle innerhalb einer Spalte oder WRAP-Box nimmt immer die volle Breite ein. Somit können mit diesen Breitenangaben indirekt Tabellen ausgerichtet und formatiert werden.&lt;/WRAP>
</p>

<p>
&lt;wrap em>Wenn der Text nach der Benutzung der Umfließungen wieder normal angezeigt werden und nicht mehr das vorher definierte Objekt umfließen soll, dann platzieren Sie ein…&lt;/wrap>
</p>

<p>
&lt;WRAP clear>&lt;/WRAP>
</p>
<pre class="code">&lt;WRAP clear>&lt;/WRAP>

</pre><p> </p>

<p>
nach der letzten Spalte/Box.
</p>

<p>
Diese Optionen können auch mit mit einem kleinen <code>wrap</code> genutzt werden (mit allen Elementen die umflossen werden können), ggf. macht die Anwendung allerdings nicht viel Sinn. <img src="/lib/images/smileys/icon_exclaim.gif" class="icon" alt=":!:" /> Breitenangaben funktionieren je nach Design üblicherweise nicht.
</p>

<p>
<img src="/lib/images/smileys/icon_exclaim.gif" class="icon" alt=":!:" /> Achtung: Breitenangaben können Probleme verursachen, werden oftmals unterschiedlich in verschiedenen Browsern aussehen und teilweise sogar das Layout zerstören. Wenn Sie kein Webdesigner sind werden Sie die Gründe für eine <a href="https://de.wikipedia.org/wiki/Box-Modell-Fehler_im_Internet_Explorer" class="interwiki iw_wpde" target="_blank" title="https://de.wikipedia.org/wiki/Box-Modell-Fehler_im_Internet_Explorer" rel="noopener">fehlerhafte Darstellung durch den Internet-Explorer</a> eventuell nicht verstehen. Testen Sie die Angaben für Ihre Spalten einfach in allen gängigen Browsern und machen Sie die Breitenangaben etwas schmaler als sie eigentlich sein sollen um das Problem versuchen zu umgehen.
</p>

<p>
Alle diese Optionen funktionieren auch in den <a href="#boxen_und_notizen" title="wiki:hilfe:plugins:standard:wrap ↵" class="wikilink1">Boxen und Notizen</a> (siehe unten).
</p>

</div>

<h4>Mehrspaltigkeit</h4>
<div class="level4">

<p>
&lt;WRAP col3>
Alle modernen Browser (Firefox, Chrome, Safari, …) unterstützen Mehrspaltigkeit. Schreiben Sie einfach <b><code>&lt;nowiki>col2&lt;/nowiki></code></b> für 2 Spalten, <b><code>&lt;nowiki>col3&lt;/nowiki></code></b> für 3 Spalten, <b><code>&lt;nowiki>col4&lt;/nowiki></code></b> für 4 Spalten und <b><code>&lt;nowiki>col5&lt;/nowiki></code></b> für 5 Spalten.
</p>

<p>
<img src="/lib/images/smileys/icon_exclaim.gif" class="icon" alt=":!:" /> Anmerkung: Mehrspaltigkeit macht bei kleingeschriebenen <code>wrap</code>s keinen Sinn.
&lt;/WRAP>
</p>
<pre class="code">&lt;WRAP col3&gt;
Alle modernen Browser (Firefox, Chrome, Safari, ...) unterstützen Mehrspaltigkeit. Schreiben Sie einfach **''%%col2%%''** für 2 Spalten, **''%%col3%%''** für 3 Spalten, **''%%col4%%''** für 4 Spalten und **''%%col5%%''** für 5 Spalten.

:!: Anmerkung: Mehrspaltigkeit macht bei kleingeschriebenen ''wrap''s keinen Sinn.
&lt;/WRAP&gt;

</pre><p> </p>

</div>

<h4>Ausrichtungen</h4>
<div class="level4">

<p>
Sie können diese verschiedenen Ausrichtungen nutzen:
</p>
<ul class="fix-media-list-overlap">
<li class="level1"> <code>leftalign</code> → linksbündig</li>
<li class="level1"> <code>rightalign</code> → rechtsbündig</li>
<li class="level1"> <code>centeralign</code> → zentriert</li>
<li class="level1"> <code>justify</code> → Blocksatz</li>
</ul>

<p>
&lt;WRAP centeralign>
Zentrierter Text…
&lt;/WRAP>
</p>

<p>
&lt;WRAP rightalign>
… rechtsbündiger Text.
&lt;/WRAP>
</p>
<pre class="code">&lt;WRAP centeralign&gt;
Zentrierter Text...
&lt;/WRAP&gt;

&lt;WRAP rightalign&gt;
... rechtsbündiger Text.
&lt;/WRAP&gt;

</pre><p> </p>

<p>
<img src="/lib/images/smileys/icon_exclaim.gif" class="icon" alt=":!:" /> Ausrichtungen können nicht bei kleinen <code>wrap</code>s verwendet werden.
</p>

</div>

<h3 class="page-header pb-3 mb-4 mt-5">Boxen und Anmerkungen</h3>
<div class="level3">

<p>
&lt;WRAP round box 570px center>
<em><b><u>round box 570px center</u></b></em>
</p>
<ul class="fix-media-list-overlap">
<li class="level1"> <code>box</code> erzeugt einen Kasten um das <code>WRAP</code>-Element herum</li>
<li class="level1"> Bei der Nutzung einer der Klassen <code>info</code>, <code>tip</code>, <code>important</code>, <code>alert</code>, <code>help</code>, <code>download</code>, <code>todo</code> erhält der Kasten eine entsprechende Färbung mit einem dazugehörigen Symbol</li>
<li class="level1"> Die Klassen <code>danger</code>, <code>warning</code>, <code>caution</code>, <code>notice</code>, <code>safety</code> erzeugen Kästen mit Signalfarben (ohne entsprechendes Symbol)</li>
<li class="level1"> Zusätzlich kann <code>round</code> hinzugefügt werden, um die Ecken des Kastens abzurunden. Dies funktioniert in allen modernen Browsern (Firefox, Chrome, Safari, …), nicht aber dem Internet Explorer.</li>
</ul>

</pre><p> </p>

</pre><p> </p>

<p>
&lt;WRAP important 300px left>
<em><b>Important</b></em>
</p>
<pre class="code">&lt;WRAP important>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP alert 300px left>
<em><b>Alert</b></em>
</p>
<pre class="code">&lt;WRAP alert>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP round help 300px left>
<em><b>Help</b></em>
</p>
<pre class="code">&lt;WRAP round help>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP download 300px left>
<em><b>Download</b></em>
</p>
<pre class="code">&lt;WRAP download>&lt;/WRAP>

</pre><p> </p>

</pre><p> </p>

<p>
&lt;WRAP clear>&lt;/WRAP>
</p>

<p>
<b>Kästen mit Signalfarben:</b>
</p>

<p>
&lt;WRAP danger 300px left>
<em><b>Danger</b></em>
</p>
<pre class="code">&lt;WRAP danger>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP warning 300px left>
<em><b>Warning</b></em>
</p>
<pre class="code">&lt;WRAP warning>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP caution 300px left>
<em><b>Caution</b></em>
</p>
<pre class="code">&lt;WRAP caution>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP round notice 300px left>
<em><b>Notice</b></em>
</p>
<pre class="code">&lt;WRAP round notice>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP round safety 300px left>
<em><b>Safety</b></em>
</p>
<pre class="code">&lt;WRAP round safety>&lt;/WRAP>

</pre><p> </p>

<p>
&lt;WRAP clear>&lt;/WRAP>
</p>

<p>
Die Hinweisboxen können ebenfalls in einer kleinen Variante im Fließtext eingesetzt werden:
</p>

<p>
&lt;wrap info>info&lt;/wrap>, &lt;wrap help>help&lt;/wrap>, &lt;wrap alert>alert&lt;/wrap>, &lt;wrap important>important&lt;/wrap>, &lt;wrap tip>tip&lt;/wrap>, &lt;wrap download>download&lt;/wrap>, &lt;wrap todo>todo&lt;/wrap> und &lt;wrap round box>round box&lt;/wrap> und &lt;wrap danger>danger&lt;/wrap>, &lt;wrap warning>warning&lt;/wrap>, &lt;wrap caution>caution&lt;/wrap>, &lt;wrap notice>notice&lt;/wrap>, &lt;wrap safety>safety&lt;/wrap>.
</p>
<pre class="code">&lt;wrap info>info&lt;/wrap>, &lt;wrap help>help&lt;/wrap>, ...

</pre><p> </p>

</div>

<h3 class="page-header pb-3 mb-4 mt-5">Markierungen</h3>
<div class="level3">

<p>
Sie können Text als &lt;wrap hi>hervorgehoben&lt;/wrap>, &lt;wrap lo>weniger wichtig&lt;/wrap> und &lt;wrap em>besonders hervorgehoben&lt;/wrap> markieren.
</p>
<pre class="code">Sie können Text als &lt;wrap hi>hervorgehoben&lt;/wrap>, &lt;wrap lo>weniger wichtig&lt;/wrap> und &lt;wrap em>besonders hervorgehoben&lt;/wrap> markieren.

</pre><p> </p>

</div>

<h3 class="page-header pb-3 mb-4 mt-5">Verschiedenes</h3>
<div class="level3">

</div>

<h4>Einrückungen</h4>
<div class="level4">

<p>
&lt;wrap indent>Dieser Text wird eingerückt.&lt;/wrap>
</p>
<pre class="code">&lt;wrap indent>Dieser Text wird eingerückt.&lt;/wrap>

</pre><p> </p>

</div>

<h4>Outdent</h4>
<div class="level4">

<p>
&lt;wrap outdent>Dieser Text wird "ausgerückt".&lt;/wrap>
</p>
<pre class="code">&lt;wrap outdent>Dieser Text wird "ausgerückt".&lt;/wrap>

</pre><p> </p>

</div>

<h4>Vorformatierter Text</h4>
<div class="level4">

<p>
&lt;WRAP prewrap 250px>
</p>
<pre class="code">Text in diesem Block wird umgebrochen, obwohl alle Worte in einer Reihe stehen.

</pre><p> </p>

<p>
&lt;/WRAP>
</p>
<pre class="code">&lt;WRAP prewrap 250px>
<code>
Text in diesem Block wird umgebrochen, obwohl alle Worte in einer Reihe stehen.

</code>
&lt;/WRAP>

</pre><p> </p>

</div>

<h4>Spoiler</h4>
<div class="level4">

<p>
Mit der Spoiler-Funktion kann Text versteckt werden, der erst durch Markieren mit der Maus sichtbar wird. Diese Funktion ist für die Nutzung im Einsatzleiterwiki eher nicht angebracht, wird aber der Vollständigkeit halber mit aufgeführt.
</p>

<p>
Es folgt der Spoiler: &lt;wrap spoiler>Dieser Text wird erst nach Markieren mit der Maus sichtbar.&lt;/wrap>
</p>
<pre class="code">Es folgt der Spoiler: &lt;wrap spoiler>Dieser Text wird erst nach Markieren mit der Maus sichtbar.&lt;/wrap>

</pre><p> </p>

</div>

<h4>Verstecken</h4>
<div class="level4">

<p>
Der folgende Text ist versteckt: &lt;wrap hide>Dieser Abschnitt muss überarbeitet werden.&lt;/wrap>
</p>
<pre class="code">Der folgende Text ist versteckt: &lt;wrap hide>Dieser Abschnitt muss überarbeitet werden.&lt;/wrap>

</pre><p> </p>

<p>
<img src="/lib/images/smileys/icon_exclaim.gif" class="icon" alt=":!:" /> Achtung: Der Text ist nur in der direkten Anzeige versteckt. Beim Ansehen des Quelltextes der Seite oder beim Bearbeiten ist dieser trotzdem sichtbar, wird in älteren Browser angezeigt und durch die Suchfunktion gefunden. &lt;wrap important>Verstecken Sie keine sicherheitsrelevanten Inhalte mittels dieser Funktion!&lt;/wrap>
</p>

</div>

<h4>Seitenumbruch</h4>
<div class="level4">

<p>
Das folgende Kommando erzeugt einen Seitenumbruch: &lt;WRAP pagebreak>&lt;/WRAP>
</p>
<pre class="code">Das folgende Kommando erzeugt einen Seitenumbruch: &lt;WRAP pagebreak>&lt;/WRAP>

</pre><p> </p>

<p>
Dies hat keine Auswirkung auf die Anzeige auf dem Bildschirm. Lediglich beim Ausdrucken des Artikels wird ein Seitenumbruch erzeugt.
</p>

</div>

<h4>Kein Seitenumbruch</h4>
<div class="level4">

<p>
Das folgende Kommando wird versuchen einen Seitenumbruch zu vermeiden: &lt;WRAP nopagebreak>Ein langer Text, oder z.B. eine Tabelle, die nicht umgebrochen werden soll.&lt;/WRAP>
</p>
<pre class="code">Das folgende Kommando wird versuchen einen Seitenumbruch zu vermeiden: &lt;WRAP nopagebreak>Ein langer Text, oder z.B. eine Tabelle, die nicht umgebrochen werden soll.&lt;/WRAP>

</pre><p> </p>

<p>
Dies hat ebenfalls keine Auswirkung auf die Anzeige auf dem Bildschirm. Lediglich beim Ausdrucken des Artikels wird versucht einen Seitenumbruch zu vermeiden.
</p>

</div>

<h4>Nicht drucken</h4>
<div class="level4">

<p>
&lt;wrap noprint>Dieser Text erscheint auf dem Bildschirm, erscheint aber nicht auf einem Ausdruck.&lt;/wrap>
</p>
<pre class="code">&lt;wrap noprint>Dieser Text erscheint auf dem Bildschirm, erscheint aber nicht auf einem Ausdruck.&lt;/wrap>

</pre><p> </p>

</div>

<h4>Nur drucken</h4>
<div class="level4">

<p>
&lt;wrap onlyprint>Dieser Text erscheint nicht auf dem Bildschirm, nur auf einem Ausdruck.&lt;/wrap>
</p>
<pre class="code">&lt;wrap onlyprint>Dieser Text erscheint nicht auf dem Bildschirm, nur auf einem Ausdruck.&lt;/wrap>

</pre><p> </p>

</div>

<h3 class="page-header pb-3 mb-4 mt-5">Kombinieren und Verschachteln</h3>
<div class="level3">

<p>
Sie können alle Klassen und Kasten-Arten kombinieren und ineinander verschachteln, z.B.
</p>

<p>
&lt;WRAP box safety 350px right>
<em><b><u>Äußerer grüner Kasten wird rechts positioniert und links umflossen</u></b></em>
</p>

<p>
&lt;WRAP 165px left>
Innere, verschachtelter Kasten wird links positioniert und rechts umflossen. Der Text ist teilweise &lt;wrap em hi>hervorgehoben&lt;/wrap>.
&lt;/WRAP>
</p>

<p>
Text im äußeren, rechts positionierten Kasten, aber nach dem inneren, links positionierten Kasten.
</p>

<p>
&lt;WRAP clear>&lt;/WRAP>
</p>

<p>
&lt;WRAP round tip>
Runder "Tip"-Kasten, unter einem <code>clear</code>.
&lt;/WRAP>
</p>

<p>
&lt;/WRAP>
</p>
<pre class="code">&lt;WRAP box safety 350px right&gt;
//**__Äußerer grüner Kasten wird rechts positioniert und links umflossen__**//

&lt;WRAP 165px left&gt;
Innere, verschachtelter Kasten wird links positioniert und rechts umflossen. Der Text ist teilweise &lt;wrap em hi&gt;hervorgehoben&lt;/wrap&gt;.
&lt;/WRAP&gt;

Text im äußeren, rechts positionierten Kasten, aber nach dem inneren, links positionierten Kasten.

&lt;WRAP clear&gt;&lt;/WRAP&gt;

&lt;WRAP round tip&gt;
Runder "Tip"-Kasten, unter einem ''clear''.
&lt;/WRAP&gt;

&lt;/WRAP&gt;

</pre><p> </p>

</div>

<h2 class="page-header pb-3 mb-4 mt-5">Quelle</h2>
<div class="level2">
<ul class="fix-media-list-overlap">
<li class="level1"> <a href="https://www.dokuwiki.org/plugin:wrap" class="urlextern" target="_blank" title="https://www.dokuwiki.org/plugin:wrap" rel="ugc nofollow noopener">https://www.dokuwiki.org/plugin:wrap</a>, veröffentlicht unter der <em>CC Attribution-Share Alike 3.0 Unported</em>-Lizenz</li>
</ul>

</div>

Aktiviere komplexe Tabellen Editorhöhe px Zusätzliche Unterstützung beim Einfügen von Bildern aus der Zwischenablage Ein

Zusammenfassung: Kleine Änderungen