Hallo Gast! Du bist noch kein Mitglied unserer Community. Um vollen Zugriff zu erhalten kannst Du dich hier kostenlos registrieren!
RSS-Feed anzeigen

notizBlog

Der Editor

Bewertung: 2 Stimmen mit einer durchschnittlichen Bewertung von 5,00.
von am 13.11.2007 um 21:36 (1102 Hits)
Da einige immer noch nicht wissen wie der WYSIWYG Editor im vBulletin bzw. dem Blog genutzt werden kann schreiben ich hier mal alle Funktionen auf. Da ich demnächst auch zusätzliche Funktionen einbauen möchte, Stichwort Fließtext, ist das hier ein guter Platz dafür. WYSIWYG steht für "What You See Is What You Get" („Was du siehst, ist [das] was du bekommst.“). Ich werde jedes Symbol einmal erklären und dann noch einige Tipps geben was die Kombination derer angeht.

Anhang 38

Beginnen wir mit der ersten Symbolreihe:

Ein Klick auf dieses Symbol entfernt vorhandene Textformatierungen. Bsp. Ihr schreibt einen Text in einem Textprogramm vor und kopiert ihn ins Forum/Blog dann bleiben die Formatierungen wie Schriftfarbe-, -größe, -typ erhalten. Da dies manchmal unvorteilhaft ist einfach den besagten Text hier im Editor markieren und auf das Symbol klicken. Euer einkopierter Text wird dann in der Standardschrift des HC Forum angezeigt. Das die folgenden beiden Auswahlboxen mit der Schriftart und der Schriftgrösse zu tun haben muss ich nicht explizit ausführen.
Ein Klick auf dieses Symbol öffnet einen Dialog in dem die Schriftfarbe festgelegt werden kann.
Anhang 41

Die Büroklammer stellt den Dialog für Anhänge dar. Dabei gibt es zwei Besonderheiten. Wenn man eine Grafik, Datei was auch immer mittels diesen Dialog:

Anhang 39

hoch geladen hat wird der Anhang an das Ende des Beitrages/Blogs gehangen wie man hier am Ende des Blogeintrages sehen kann. Die angehängten Grafiken werden dann verkleinert dargestellt und auf Klick in der Vollansicht dargestellt. Die nette Ajax Funktion die ihr aus dem Forum kennt greift hier noch nicht aber ich arbeite daran un irgendwann sollte es auch so sein wie im Forum das sich nicht ein neues Browserfenster für die Vollansicht öffnet.
Die Besonderheit dieser Funktion liegt in den Inline Attachment. Wenn man nach dem hoch laden nochmals den Dialog öffnet könnt ihr die Datei an der Stelle im Beitrag positionieren wo ihr möchtet. Einfach den Cursor an die betreffende Stelle Setzen und auf den Dateinamen im Dialog klicken. Ein Vorschaubild wird dann angezeigt. Beim Erstellen erscheint dann [ ATTACH ]Nummer[ /ATTACH ] .

steht für Schritt rückwärts/vorwärts wie es eigentlich in allen Textbearbeitungsprogrammen vorhanden ist.

fette Schrift
kursive Schrift
Schrift unterstrichen

Textpositionierung
geordnete Liste mit fortlaufender Nummer
ungeordnete Liste
Einzug vergrößern/verkleinern

Link einfügen. Grundsätzlich ist es möglich einen Link einzufügen in dem man ihn einfach reinkopiert. vBulletin wandelt ihn automatisch um und kürzt die Ansicht was aber meist unschön ausschaut wie im folgenden Beispiel: http://www.hertha-chat.de/forum/blog_post.php?do=editblog&b=20
Übrigens wird hier im vBulletin von HC ein externer Link automatisch mit vorangestellter Grafik gekennzeichnet.

Besser ist in diesem Falle wie folgt vorzugehen
  1. Ein Wort für den Link schreiben: Hier mein Link
  2. Das Wort mittels Maus markieren
  3. Auf das Symbol klicken und in dem Dialogfenster den Link einkopieren
  4. Ergebnis = Hier mein Link
Ein Klick auf dieses Symbol entfernt die hinterlegten Links wieder.
Mittels Klick auf dieses Symbol könnt ihr eine Mailadresse einfügen. Dies geschieht analog wie beim Link einfügen nur wird die mailto: Option mitgegeben was den Umstand erzeugt das auf dem Rechner des Betrachters nach Klick auf dem Link automatisch das Mailprogramm geöffnet wird.

Grafik einfügen. Hier könnt ihr eine Grafik einfügen die im Netz vorhanden ist. Habe ich beim Schreiben diesen Artikels bestimmt schon 20mal gebraucht

Zitat einfügen. Hier ist es wichtig das der zu zitierende Text zwischen den Tags einkopiert wird. enn ihr auf das Symbol klickt wird im Editor
[ QUOTE ].[ QUOTE ] angezeigt. Meist steht auch der Cursor an der Stelle wo ich mal eben den roten Punkt gesetzt habe. Sollte der Cursor da nicht stehen einfach setzen und eurer Zitat einkopieren.

Vergrößert/Verkleinert das Texteingabefeld ein wenig

Mit Klick auf dieses Symbol wechselt ihr den Editor. Allerdings werden die Befehle nicht umgesetzt. Alles was an Formatierungen vorgenommen wurde wird ungeparst dargestellt. Das bisher geschriebene würde nach Klick auf das Symbol so dargestellt:

Klicke auf die Grafik für eine größere Ansicht

Name:	editornoparse.jpg
Hits:	34
Größe:	106,4 KB
ID:	840

Schauen wir mal nach rechts sticht uns die Smileybox ins Auge. Mit Klick auf das entsprechende Emoticon wird dieses sofort im Beitrag dargestellt.

Anders verhält es sich wenn man auf diesen Freund hier klickt
Dann öffnet sich eine komplett neue Seite mit lauter Smileys die ich irgendwann mal angelegt hatte und da viele Smileys im Forum schon verlinkt wurden auch immer mitziehe. Dort einfach Smiley seiner Wahl aussuchen und den dargestellten Code in den Beitrag einkopieren. Dann sollte natürlich dieser Dialog nicht verwendet werden.

Von mir bereitgestellte Erweiterungen

Diese Erweiterungen gehören nicht zum Standard sind aber sehr nützlich. Thema Fließtext

mit Klick auf dieser Grafik ist es möglich Text rechts von einer Grafik umschließen zu lassen. Dazu einfach die URL zu der Grafik zwischen die Tags IMGR und /IMGR (für Linksumlaufenden Text lauten die entsprechenden Tags IMGL und /IMGL) setzen. Danach einfach wie gewohnt euren Text schreiben.

Beispiel:
[imgr]http://www.hertha-chat.de/forum/images/fimpress/impression27.jpg[/imgr]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Das geht auch mit links (siehe Anleitung rechts )

Beispiel:
[imgl]http://www.hertha-chat.de/forum/images/fimpress/impression48.jpg[/imgl]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Somit habe ich nun alle Symbole erklärt und führe diesen Beitrag fort wenn ich neuere Symbole freischalte/einbaue.....
Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Klicke auf die Grafik für eine größere Ansicht

Name:	wysiwyg.jpg
Hits:	41
Größe:	70,8 KB
ID:	836   Klicke auf die Grafik für eine größere Ansicht

Name:	wysiwyg_attach.jpg
Hits:	23
Größe:	28,5 KB
ID:	837   Klicke auf die Grafik für eine größere Ansicht

Name:	editor2.jpg
Hits:	41
Größe:	235,1 KB
ID:	839  
Miniaturansicht angehängter Grafiken Angehängte Grafiken  
Stichworte: vbulletin editor
Kategorien
Mein Blog auf HC

Kommentare

  1. magix -
    Benutzerbild von magix
    15. Januar 2008 den Editor um die Fließtext-Funktion (rechts/links) erweitert.

Trackbacks