Downloads

Test

Erstellen Sie die Inhalte der Webseiten (wie auch diesen Text) in einer gegenüber HTML vereinfachten Schreibweise (WikiText). Die vereinfachte Schreibweise WikiText ist angelehnt an die Mediawiki-Syntax und wird von EasyWebitor in HTML Code "übersetzt". So können z.B. auch Seiten die für Mediawiki erstellt wurden einfach übernommen werden.
Das geht natürlich auch umgekehrt und wir können mit EasyWebitor und WikiText erstellte Seiten in Wikipedia oder ein anderes Wiki kopieren.

WikiText

WikiText kann/muss für jeden Texteditor einzeln aktiviert werden. Dieser Button (rechts oben über dem Text) schaltet die Verwendung von WikiText ein/aus.
Sollten die Möglichkeiten von WikiText einmal nicht für die Gestaltung der Seite ausreichen kann auch innerhalb von WikiText normaler HTML Code verwendet werden.

Welche Möglichkeiten WikiText bietet wird hier erklärt:

Text-Absatz

HTML Syntax ignoriert Absätze im Text. Sie werden aber automatisch bei "Blockelementen" wie z.B. tabledivpre ... oder bei dem Zeilenumbruch Tag br / eingesetzt.
In WikiText wird jeder Textabsatz - so wie er im Editor gesetzt wurde - auch in der fertigen Webseite verwendet.

Leerzeilen

Ebenso wie der Textabsatz wird auch eine Leerzeile von der HTML Syntax ignoriert. EasyWebitor fügt für jede Leerzeile ein Zeilenumbruch Tag br / in die fertige Webseite ein.

Links (Verweise)

In den Syntax Beisielen ist "Link" der Verweis auf die Webseite und "Linkname" der Text der angezeigt wird. Innerhalb der Blockelemente pre ... /pre" werden keine Links in der WikiText Syntax unterstützt.

Standard Links

Syntax:

	[Link Linkname] oder [Link | Linkname]
	Beispiele:
	[http://www.mediawiki.de Wiki]
		(Externer Link auf andere Webseiten)
	[/EasyWebitor/EasyWebitor.html Easy Webitor]
 		(Link auf eine Webseite innerhalb dieser Domain)
	[#Tabellen | Tabellen erstellen]
 		(Link innerhalb dieser Seite) 

Wiki Links

Syntax:

	[[ Link ]] oder [[Link | Linkname]]
	Beispiele:
	[[ Webbrowser ]] oder [[ Webbrowser | Browser ]] 
		(Link auf die Wikipedia Seite: "Webbrowser")

Bei den WikiLinks fehlt allerdings der Bezug auf die dazugehörige Webseite. Diesen Bezug können wir vor der Verwendung des Links in einer eigenständigen TextZeile so definieren: (Wichtig dabei ist der Schrägstrich "/" am Ende der Bezugsdefinition) .

WIKI-BASE-ADR=http://de.wikipedia.org/wiki/

So wird aus Webbrowser der Link http://de.wikipedia.org/wiki/Webbrowser. Auf diese Weise können wir auch einen Bezug auf jede beliebig andere Webseite definieren.
Auch ein Bezug auf den eigenen Webaufrtitt ist möglich.

WIKI-BASE-ADR=/

Ein Link auf die Startseite.

Textauszeichnung

''kursiv / italic''
'''fett / bold'''
'''''kursiv+fett / italic+bold '''''

1.Zeichen einer Zeile

Die folgenden Zeichen verwendet WikiText nur dann als "Steuerzeichen" wenn sie direkt am Zeilenanfang stehen. Also direkt nach dem Zeilenumbruch.

Überschriften

Das Zeichen "=" wird für Überschriften verwendet.

 = Überschrift ganz groß = 
 ...
====== Überschrift ganz klein ======

Zulässig sind 1 - 6 Zeichen zur bestimmung der Schriftgröße entsprechend den HTML Tags <h1-6>. Vor und hinter der Überschrift müssen die selbe Anzahl der Zeichen "=" und mindestens ein Leerzeichen sein.
Gleichzeitig wird jede Überschrift als "Anker" für die Inhaltsangabe der aktuellen Seite definiert. Daraus kann EasyWebitor die Links für die Inhaltsangabe erstellen.

vorformatierter Text

Das Zeichen " " (Leertaste) am Zeilenanfang.
Es hat die selbe Bedeutung wie "<pre>" also ein vorformatierter Text, bei dem keine Zeilenumbrüche entfernt oder eingefügt werden. Sinnvoll für z.B. Listings wie Codeblöcke usw. Innerhalb dieser Textzeilen wird keine WikiText Syntax umgesetzt.

Listen

# ListeNummer 1
## ListeNummer 1.1 
# ListeNummer 2

entspricht
Das Zeichen "#" am Zeilenanfang steht für nummerierte Listen.

* ListeNummer 1
** ListeNummer 1.1 
* ListeNummer 2

entspricht
Das Zeichen "*" am Zeilenanfang steht für nicht nummerierte Listen.

Definitionslisten

; Titel
: Definition 1
: Definition 2

entspricht

Tabellen

Die"Steuerzeichen" die für Tabellen verwendet werden müssen auch am Anfang einer Zeile stehen. Die Tabellen werden in WikiText mit dem Tag {| eingeleitet und mit dem Tag |} beendet.

Bei einer Tabelle kommen diese Zeichen zur Verwendung

Zeichen	Beschreibung	HTML-Tag	Kommentar
{|	Tabellenanfang	<table>	nur am Zeilenanfang erlaubt
|+	Tabellenüberschrift	<caption></caption>	nur am Zeilenanfang erlaubt
|-	neue Tabellenzeile	<tr></tr>	nur am Zeilenanfang erlaubt
!	Zellen Überschrift	<th></th>	nur am Zeilenanfang erlaubt
|	neue Zelle	<td></td>	nur am Zeilenanfang erlaubt
|}	Tabellenende	</table>	nur am Zeilenanfang erlaubt
! Titel1 !! Titel2 ...	neue Überschriften	<th></th><th></th> ...	doppelte Zeichen !! trennen einzelne Überschriften einer Tabellenzeile
| Zelle1 || Zelle2 ...	neue Zellen	<td></td><td></td> ...	doppelte Zeichen || trennen einzelne Zellen einer Tabellenzeile
| class="Zelle" | Text	Stylesheet CSS	class, style ...	einfaches Zeichen | trennt Stylesheetanweisung vom Zellentext

und hier noch ein einfaches Beispiel einer Tabelle:

Beispieltabelle

Farbe	HTML-Notierung
Rot	#ff0000
Grün	#00ff00
Blau	#0000ff
Schwarz	#000000

{| class="wikitableright"  style="text-align:center;"
|+ Beispieltabelle
|-
! Farbe !! HTML-Notierung
|-
|  style="color:#ff0000;" | Rot || style="text-align:left;" | #ff0000
|-
|  style="color:#00ff00;" | Grün || style="text-align:center;" | #00ff00
|-
|  style="color:#0000ff;" | Blau || style="text-align:right;" | #0000ff
|-
|  Schwarz ||  #000000
|}

Formatvorlagen

Mediawiki ermöglicht es Formatvorlagen zu definieren um für ähnliche Inhalte eine einheitliche Darstellung zu gewährleisten. Auf diese vom Wiki-Betreiber intern gespeicherten Formatvorlagen kann EasyWebitor nicht zugreifen und kennt somit nicht die logischen Zusammenhänge auf denen diese Vorlagen beruhen.
Wir können allerdings die Syntax dieser Vorlagen nutzen um doch zumindest deren Informationsinhalt (soweit verfügbar) in ähnlicher Weise im Browser anzuzeigen.
Die Formatvorlagen werden in WikiText mit dem Tag {{ eingeleitet und mit dem Tag }} beendet.

Formatvorlage (inline)

Einzelne Elemente der Vorlage werden durch das Separatorzeichen | getrennt, das erste Element ist immer der Name der Vorlage. Einzeilige Formatvorlagen können im Textfluß (inline) verwendet werden, EasyWebitor ersetzt sie durch den HTML-Tag span.
Beispiele:

{{htmltag | span }}
{{Name2 | Text=Wert | Text2 ... }} 

ersetzt EasyWebitor zu

span class="htmltag"span/span
span class="Name2"Text=Wert/span span class="Name2"Text2 .../span

Wenn wir dann für das Beispiel {{htmltag | span }} auch noch diese CSS Definition erstellen:

.htmltag:before {	content: "<"; } 
.htmltag:after { 	content: ">"; } 
.htmltag {	color: #0000ff;	padding: 0; }

können wir HTML-Tags wie z.B. span problemlos in Webseiten darstellen.

Ein weiteres Beispiel zeigt einen Text in der Farbe rot (CSS Definition: .rot {color: #55aa00;} ):
{{rot|Ein Text in Rot! }}Ein Text in Rot! ( Wenn nicht rot als grüner Farbton definiert wurde).

Formatvorlage (box)

Eine mehrzeilige Formatvorlage eignet sich natürlich nicht mehr für die Inline - Verwendung. Daraus erzeugt EasyWebitor eine Box in der Form: div class="Name"Inhalt der Box/div wobei die einzelnen Elemente des Inhalts der Box z.B. "Name=Müller" als HTML Definitionsliste umgesetzt wird.
Die Formatvorlagen dienen dazu, Inhalte in einem einheitlichen Format zu Präsentieren wie z.B. ein auszufüllendes Formular. Alle nicht ausgefüllten Zeilen (wie im Beispiel der Beruf) werden bei der Anzeige der Box nicht dargestellt.
Beispiel: Infobox Personendaten

{{Infobox Personendaten
| Name=<b>Müller</b>
| Vorname=Hans
| Beruf=
| Wohnort=Hamburg
}}

So wie oben kann eine solche Infobox aussehen, wenn ein geeignetes Stylesheet definiert wurde. Fehlt dieses Stylesheet sieht es dann so aus:

Eine Formatvorlage als Box muss nicht zwingend Zeilen der Form "Name=Wert" enthalten. Somit kann sie als Mediawiki konformer Ersatz für Hervorheben mit "!" eingesetzt werden.
Beispiel: "warning"

{{ warning | Auch das ist eine Formatvorlage }}

Beispiel: "error"

{{ error
| Hinweise auf Fehler
| in einer Box
}}

Hervorheben

Das Zeichen "!" am Zeilenanfang dient dazu Textepassagen abzugrenzen, entsprechend dem HTML Tag "<div>". Dazu können

• 1-4 Zeichen ("!" bis "!!!!")
• Die Zahlen 1-99 ("!1!" bis "!99!")
• oder ein Label wie z.B. ("!error!" oder "!warning!")

zur unterschiedlichen Gestaltung dienen.
Die Umsetung nach HTML erfolgt über:

In der CSS Datei des Layouts kann dann z.B. so die eingefärbten Textboxen definiert werden.

div.highlight1 {
   background-color: #e8e8e8;
	border: 1px solid #1678a5;
}
div.highlight2 {
	background-color: #bbffbb ;
	border: 1px solid #00ff00;
}
div.highlight3 {
	background-color: #ffffbb;
	border: 1px solid #ffbb00;
}
div.highlight4 {
	background-color: #ffbbbb;
	border: 1px solid #ff0000;;
}
div.warning {
	background-color: #ffffbb;
	border: 1px solid #ffbb00;
}
div.error {
	background-color: #ffbbbb;
	border: 1px solid #ff0000;;
}

<nowiki>

Innerhalb der TAGs nowiki/nowiki / source/source / syntaxhighlight/syntaxhighlight wird der Text so dargestellt, wie er geschrieben wurde. Es wird im Normalfall kein HTML-Code im Browser oder Wiki-Code ausgeführt. Somit eignen sie sich um HTML-Quellcode oder WikiText Quellcode im Browser anzuzeigen.
Dazu werden einige Zeichen innerhalb des Bereiches in HTML-Codes umgesetzt wie z.B. "<" wird ersetzt durch "&#60;". Für diese Umsetzung benötigt EasyWebitor eine Definitionsdatei mit dem Dateinamen: replace.def. Diese Datei ist in mehrere Abschnitte unterteilt die folgende Bedeutung haben:

Beschreibung: replace.def

Abschnitt	Beipiel	Beschreibung
[NOWIKI]	<=&#60;	Zeichenersetzungen für den Bereich nowiki/ /nowiki
[NO-WIKITAGS]	<source>=<code>	source ist ein "nowiki"-TAG und wird umgesetzt in code
[INDENTOFF]	br,img...	Für die autom. Texteinrückung der HTML Dateien
[LINEFEED]	img,span ...	nach diesen TAGs am Zeilenende wird kein Absatz br / eingefügt.

Beispiel: replace.def

[NOWIKI]
// Diese Zeichen werden im Bereich <nowiki> .. </nowiki> ersetzt
<=&#60;
>=&#62;
!=&#33;
#=&#35;
'=&#39;
*=&#42;
[=&#91;
]=&#93;
{=&#123;
|=&#124;
}=&#125;
[NO-WIKITAGS]
// Umsetzung von zusätzlichen Mediawiki-Tags nach HTML-Tags
<nowiki>=
</nowiki>=
<source>=<code>
</source>=</code>
<syntaxhighlight>=<pre class="code">
</syntaxhighlight>=\n</pre>
[INDENTOFF]
// HTML-Tags "keine Texteinrückung" zur automatischen Texteinrückung
br,img,!,meta,link
[LINEFEED]
//nach diesen HTML TAGs am Zeilenende kommt ein Absatz.
//Bei allen anderen TAGs am Zeilenende wird kein Absatzn eingefügt
a,abbr,acronym,applet,b,basefont,bdo,big,br, button, cite,code,del,
dfn,em,font,i,img,ins,input,iframe,kbd,label,map,object,q,samp,script,
select,small,span,strong,sub,sup,textarea,tt,var

WikiText/Wikipedia

Falls der mit WikiText erstellte Seiteninhalt auch nach Wikipedia oder andere Wiki's kopiert werden soll (oder auch von Wikipedia nach WikiText), sind einige Punkte zu Beachten.

• Die bei Hervorheben beschriebene Methode ist nicht kompatibel mit Wikipedia, also nicht benutzen.
• Abweichend zu Wikipedia wird in EasyWebitor jeder Zeilenumbruch ausgeführt. Bei Wikipedia führen nur Leerzeilen zum Zeilenumbruch (mit anschließender Leerzeile) .
• Die genauen Adressen für Bilder oder andere Dateien die in Wikipedia gespeichert sind (Syntax: [[File:image.png| Image ]]) lassen sich nicht aus dem Wikipedia-Quelltext bestimmen. Hier ist immer eine manuelle Nacharbeit notwendig.
• Klasssen oder Id's wie z.B. in <htmltag class="Klasse"> möglichst nur verwenden, wenn sie auch im Wiki definiert sind.
• Formatvorlagen aus Wikipedia benötigen möglicherweise entsprechende Stylesheet (CSS) Definitionen damit der Inhalt in sinnvoller/ansprechender Form angezeigt werden kann.
• Formatvorlagen wie z.B. die auf dieser Seite oft benutzte Vorlage {{htmltag|div}} zur Darstellung von HTML-TAGs sind in Wikipedia unbekannt. Eine von EasyWebitor nach Wikipedia kopierte Seite mit dieser Vorlage wird also nicht das gewünschte Ergebis erziehlen.