Antworten

Tutorial: Arbeiten mit dem Forum-Editor



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:

Nicht aktiviert:


Aktiviert:


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:




Schriftart:
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:
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:
Hier wählen wir eine Schriftfarbe aus. Standart ist hierbei schwarz.

Rot
Grün
Blau
Gelb

Smilie-Auswahl:
Hier 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.

, , , , , , , , , ,

Anhang-Verwaltung:
Die 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:
Diese 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:




Fettschirft:
Draufklicken und der Text ist fett.
Kursive Schrift:
Ein Klick und der Text ist kursiv.

Unterstrichene Schrift:
Einmal draufklicken und der Text wird unterstrichen dargestellt.

Linksbündig:
Diese Einstellung ist standartmäßig gewählt. Der Text wird so linksbündig angezeigt.

Linksbündig

Mittig:
Der Text wird mit dieser Einstellung mittig angezeigt.

Mittig

Rechtsbündig:
Hiermit wird der Text rechtsbündig angezeigt.

Rechtsbündig

Zahlen-Auflistung:
Hiermit machen wir eine Zahlen-Auflistung. Ein Klick drauf und dann einen Text eingeben und die ENTER-Taste drücken, um eine neue Zeile bzw. eine neue Auflistungszeile zu öffnen.

1. Das
2. ist
3. eine
4. Zahlen-Auflistung

Spiegelstriche:
Es sind nicht Spiegelstriche, aber "Spiegelpunkte". Es basiert auf dem gleichen Prinzip, wie die Zahlen-Auflistung.

• Das
• sind
• Spiegelpunkte

Einzug verkleinern:
Mit dieser Funktion wird der Einzug verkleinert.

Einzug verkleinern

Einzug vergrößern:
Mit dieser Funktion wird das Gegenteil von "Einzug verkleinern" erreicht.

Einzug vergrößern

Link einfügen:
Hiermit 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:
Mit 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:
Einen 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:
Mit 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.



Zitat:

Mit 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 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:
Diese 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:
Das 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:
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 ()

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:
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 ( ) 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... (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