Tutorial: Arbeiten mit dem Forum-Editor
Tutorial: Arbeiten mit dem Forum-Editor
http://mypicz.my.funpic.de/hf/tutorials/editor/logo.jpg
Im folgenden Tutorial wird euch der vBulletin-Forum-Editor näher gebracht. -
Mit welchem Button ihr was erreichen könnt und wie euer Beitrag optisch schöner aussieht.
Inhaltsverzeichnis:
1. Vorwort
2. Tutorial: Editor
2.1: Leiste Nr. 1
2.2: Leiste Nr. 2
2.3: Zusatzcodes
3. Nachbemerkung
1. Vorwort:
Auf Wunsch und Nachfrage erstelle ich nun dieses Tutorial.
Ich habe das gesamte Tutorial auf mit einfachen Editor gemacht, nicht mit dem erweiterten Editor, mit dem ich sonst immer arbeite. Das mit den [b][/b], [u][/u] usw. wäre etwas viel für den Anfang. ;)
Für Einsteiger, für die dieses Tutorial auch ausgelegt ist, ist der vereinfachte Editor wie der Name schon sagt viel einfacher. - Wer sich nur mit Word ein bisschen auskennt, oder weiß wie man bei Word fett schreibt oder unterschrichen, der wird auch mit dem vereinfachten Editor hier keine Schwiegrigkeiten haben, denn auf dem gleichen Prinzip beruht das ganze.
2. Tutorial: Editor:
Lange Rede kurzer Sinn. - Hier nun das Tutorial.
Bevor wir anfangen können, öffnen wir mit dem "Antworten"-Button das Antwortenfeld.
Nun klicken wir den folgenden Button, sofern dieser noch nicht aktiviert ist: http://mypicz.my.funpic.de/hf/tutori...switchmode.gif
Nicht aktiviert:
http://mypicz.my.funpic.de/hf/tutori...iert_thumb.gif
Aktiviert:
http://mypicz.my.funpic.de/hf/tutori...iert_thumb.gif
Es muss so aussehen, wie auf dem 2. Bild. - Der Button muss aktiviert sein.
So, nun beginnt aber erst das eigentliche Tutorial.
Ich denke, dass es am praktischsten ist, wenn ich einfach jeder Button einzeln erkläre und dazu dann noch ein paar Dinge sage...
2.1: Leiste Nr. 1
Nehmen wir uns als erstes folgende Leiste vor:
http://mypicz.my.funpic.de/hf/tutori...or/leiste1.gif
Schriftart:
http://mypicz.my.funpic.de/hf/tutorials/editor/1_01.gif Hier wählen wir die Schriftart aus. Einfach drauf klicken und losschreiben. - Mit der neuen Schriftart. Standart ist hierbei Verdana.
Arial
Arial Black
Arial Narrow
Bock Antiqua
Century Gothic
Comic Sans MS
Courier New (Schriftart bei PHP, HTML-Codes)
Fixedsys
Franklin Gothic Med
Garamond
Georgia
Impact
Lucida Console
Lucida Sans Unicode
Microsoft Sans Serif
Palatino Linotype
System
Tahoma
Times New Roman
Trebuchet MS
Verdana (Standart-Schriftart bei Posts)
Schriftgröße:
http://mypicz.my.funpic.de/hf/tutorials/editor/1_02.gif Mit diesem Feld wählen wir die Schriftgröße aus. Hier gilt, wie bei allen anderen Button auch, draufklicken und losschreiben. Standart ist hierbei Größe 2.
Größe 1
Größe 2
Größe 3
Größe 4
Größe 5
Größe 6
Größe 7
Schriftfarbe:
http://mypicz.my.funpic.de/hf/tutori...itor/color.gifHier wählen wir eine Schriftfarbe aus. Standart ist hierbei schwarz.
Rot
Grün
Blau
Gelb
Smilie-Auswahl:
http://mypicz.my.funpic.de/hf/tutori...tor/smilie.gifHier können wir in einer Schnellauswahl Smilies auswählen, wie rechts in der Smilie-Auswahl. Auch hier gibt es automatisch generierte, die sich bei jedem neuladen verändern.
:mad:, :p, ;), :D, :o, :), :(, :confused:, :rolleyes:, :cool:, :eek:
Anhang-Verwaltung:
http://mypicz.my.funpic.de/hf/tutori...tor/attach.gifDie Verwaltung der Anhänge finden wir hier. Von .jpg zu .mpg, von .ram zu .doc - Eigentlich alle gängigen Formate können angehöngt werden.
Zurück-Vor:
http://mypicz.my.funpic.de/hf/tutorials/editor/undo.gifhttp://mypicz.my.funpic.de/hf/tutorials/editor/redo.gifDiese Buttons sollten wir, wie viele andere auch, aus Word kennen. Damit können wir einzelne Schritte vor - bzw. rückgängig machen.
2.2: Leiste Nr. 2
Kommen wir zur 2. Leiste:
http://mypicz.my.funpic.de/hf/tutori...or/leiste2.gif
Fettschirft:
http://mypicz.my.funpic.de/hf/tutorials/editor/bold.gifDraufklicken und der Text ist fett.
Kursive Schrift:
http://mypicz.my.funpic.de/hf/tutori...tor/italic.gifEin Klick und der Text ist kursiv.
Unterstrichene Schrift:
http://mypicz.my.funpic.de/hf/tutori.../underline.gifEinmal draufklicken und der Text wird unterstrichen dargestellt.
Linksbündig:
http://mypicz.my.funpic.de/hf/tutori...ustifyleft.gifDiese Einstellung ist standartmäßig gewählt. Der Text wird so linksbündig angezeigt.
Linksbündig
Mittig:
http://mypicz.my.funpic.de/hf/tutori...tifycenter.gifDer Text wird mit dieser Einstellung mittig angezeigt.
Spiegelstriche:
http://mypicz.my.funpic.de/hf/tutori...rderedlist.gifEs sind nicht Spiegelstriche, aber "Spiegelpunkte". Es basiert auf dem gleichen Prinzip, wie die Zahlen-Auflistung.
Einzug verkleinern:
http://mypicz.my.funpic.de/hf/tutori...or/outdent.gifMit dieser Funktion wird der Einzug verkleinert.
Einzug verkleinern
Einzug vergrößern:
http://mypicz.my.funpic.de/hf/tutori...tor/indent.gifMit dieser Funktion wird das Gegenteil von "Einzug verkleinern" erreicht.
Einzug vergrößern
Link einfügen:
http://mypicz.my.funpic.de/hf/tutori...createlink.gifHiermit erreichen wir, dass ein Text zu einer Seite verlinkt. Erst schreiben wir einen Satz, wie z.B. "klick hier!", dann markiert ihr das "hier" und drück den Button. Nun öffnet sich ein Fenster, in dem wir dann den Link zu Seite, zu der wir verlinken wollen, eingeben.
klick hier!
Link entfernen:
http://mypicz.my.funpic.de/hf/tutori...tor/unlink.gifMit dieser Funktion können wir die mit der "Link einfügen"-Option Links entfernt werden, ohne, dass der Text entfernt wird.
Vorher: klick hier! - Nachher: klick hier!
eMail einfügen:
http://mypicz.my.funpic.de/hf/tutori...itor/email.gifEinen Klick darauf und es öffnet sich ein Fenster, in dem wir eine eMail-Adresse eingeben können. Klickt man dann im fertigen Beitrag auf diese Mail, öffnet sich automatisch euer standartmäßiges Mail-Programm (z.B.: Microsoft Outlook).
das.ist@ein-beispiel.de
Bild einfügen:
http://mypicz.my.funpic.de/hf/tutori...nsertimage.gifMit dieser Funktion können wir alle beliebigen Bild-Formate einfügen. Wenn wir vorher ein Bild auf unserem Webspace oder bei einem Image-Hoster hochgeladen haben, fügen wir im dabei öffnenden Fenster den Link ein.
http://mypicz.my.funpic.de/hf/tutorials/editor/text.png
Zitat:
http://mypicz.my.funpic.de/hf/tutori...itor/quote.gifMit diesem Button erreichen wir das gleiche Ergebnis, wie wenn wir den "Zitieren"-Button klicken unter einem Beitrag. Diese Funktion ist sher praktisch, wenn wir eine Buchausschnitt o.Ä. zitieren wollen. Um das machen zu können, einfach einen Text schreiben, den dann markieren und auf den Button klicken.
[quote]Hier nun das Zitat hinschreiben[/quote]
Der Code für mein Zitat wäre nun:
[quote=Karl Valentino]Alle reden vom Wetter, aber keiner unternimmt was dagegen.[/quote]
Zitat:
Zitat von Karl Valentino
Alle reden vom Wetter, aber keiner unternimmt was dagegen.
[color=Black] [b]CODE einfügen:
[IMG]http://mypicz.my.funpic.de/hf/tutorials/editor/code.gif[/IMG][/b]Diese Funktion wird oft genutzt, um Smilie-Codes zu posten, ohne dass der Smilie angezeigt wird. Einen Text schreiben, markieren und auf den Button klicken. - Wie bei der Zitat-Funktion.
[/color][code]Hier nun den Code-Text hinschreiben.[/code]
Heraus kommt:
Code:
Hier nun den Code-Text hinschreiben.
HTML-Code einfügen:
http://mypicz.my.funpic.de/hf/tutorials/editor/html.gifDiese Code-Funktion basiert auf dem gleichen Prinzip, wie bei "CODE einfügen".
[color=Black]
[/color][html]Hier nun den Code-Text hinschreiben.[/html]
Heraus kommt diesmal:
HTML-Code:
Hier nun den Code-Text hinschreiben.
PHP-Code einfügen:
http://mypicz.my.funpic.de/hf/tutorials/editor/php.gifDas ist die Funktion, mit der hier im Forum überall die Tabellen gemacht werden.
Es basiert auf dem gleichen Prinzip, wie die das CODE und HTML einfügen.
Wir markieren die alte bzw. die letzte Tabelle, kopieren diese mit "Strg.+C" und fügen sie dann aktualisiert wieder ein ("Strg.+V"). Dann kommt der PHP-Code ins Spiel. - Wir markieren die eingefügte Tabelle wieder und klicken dann den PHP-Button. Nun sehen wir [php] und [/php] um die Tabelle herum. - Das ist der PHP-Code.
Der Code schaut dann wie folgt aus:
[php]Aktueller Tabellenstand:
1. User A : 5 Punkte
2. User B : 3 Punkte
3. User C : 1 Punkt[/php]
Am Ende im Beitrag kommt dann folgendes bei raus:
PHP-Code:
Aktueller Tabellenstand:
1. User A : 5 Punkte
2. User B : 3 Punkte
3. User C : 1 Punkt
Mediadaten einfügen:
http://mypicz.my.funpic.de/hf/tutori...itor/media.gif Hiermit können wir eine Sonderfunktion des Hilfe-Forums benutzen.
Wir brauchen lediglich einen Link zu einer Datei, die wir zum Download anbieten wollen. - Zum Beispiel den Media-Button (http://mypicz.my.funpic.de/hf/tutori...itor/media.gif)
Wir kopieren den Link zum Bild und fügen ihn im Editor, wir markieren den eingefügten Link und klicken auf den Media-Button.
Der Code dafür:
[media]http://mypicz.my.funpic.de/hf/tutorials/editor/media.gif[/media]
Im abgeschickten Beitrag sieht es dann so aus:
[media]http://mypicz.my.funpic.de/hf/tutorials/editor/media.gif[/media]
WIKI-Code einfügen:
http://mypicz.my.funpic.de/hf/tutorials/editor/wiki.gif Auch hiermit können wir eine Sonderfunktion des HFs benutzen.
Hier brauchen wir lediglich das Wort im Editor schreiben, dann markieren und anschließend auf den WIKI-Button ( http://mypicz.my.funpic.de/hf/tutorials/editor/wiki.gif ) klicken.
Code dafür:
[wiki]Internet[/wiki]
Im endgültigen Post:
Internet
2.3: Zusatzcodes
Im Folgenden noch 2 Schmankerl für die Fortgeschritteneren.
Die folgenen Codes funktionieren in jedem vBulletin, da sie zu den Standart-Codes gehören.
Umwandlung in vB-Code verhindern:
Die Basis:
In diese Basis fügen wir nun den kompletten Code, den wir uns vorher erstellt haben ein:
PHP-Code:
[noparse][b][u][i]Das NoParse -Beispiel.[/i][/u][/b][/noparse]
Im Post kommt am Ende das heraus:
[b][u][i]Das NoParse -Beispiel.[/i][/u][/b]
- Es fand keine Umwandlung statt!
Hightlight:
Die Basis:
In diese Basis fügen wir nun einen Text ein, der hervorgehoben werden soll:
PHP-Code:
[highlight]Das Hightlight -Beispiel.[/HIGHLIGHT]
Am Ende kommt heraus:
Das Hightlight -Beispiel.
- Der Text wurde automatisch, praktisch und einfach hevorgehoben!
3. Nachbemerkung
Ich übernehme keinesfalls Haftung für eventuell entstehende Schäden. *g*
Ich hoffe, ich habe allen damit geholfen, die es noch nicht ganz verstanden haben. (:
Damit auch etwas für die Kenner dabei ist, habe ich noch die Zusatzcodes mit reingepackt.
Das Tutorial war nun glaub ich mein zeitaufwändigstest, deshalb nicht zu viel negative Kritik... :D (Spaß.)
Die Stunden rechne ich nun lieber nicht zusammen...aber ich käme wohl locker auf ca. 4 Stunden. - Allerdings waren davon 1 1/2 Stunden mit anderen Dingen noch etwas abgelenkt. Mit anderen Worten, ca. 3 Stunden pure Arbeit.
________________________________________
© 2007
SilverScore /
LagoOn
-------
Das Weitergeben dieses Tutorials ist nur mit der ausdrücklichen Erlaubnis von SilverScore bzw. LagoOn gestattet.
Das Copyright darf dabei nicht entfernt oder verändert werden!
________________________________________
Liebe Grüße
SilverScore
