Freitag, 11. April 2008
Die große Machbunt- Anleitung
Irgendwann in grauer Urzeit hatte beetfreeq mal eine Anleitung gebastelt, um Buttons zum Einfügen von HTML- Tags zu generieren. Das Herzstück dieser Geschichte, das eigentliche Javascript, stammt von dieser Anleitung.
Nachdem ich diese umgesetzt hatte, habe ich den Code verändert, meinem Geschmack angepaßt und herausgekommen ist am Ende das, was man jetzt rechts neben dem Editierkästchen sehen kann.
Da ich auch Smileys einbauen wollte, und mir die Buttons wegen ihrem Grau und der unterschiedlichen Breite nicht wirklich gefielen, bin ich umgestiegen auf die direkte Anzeige als Text bzw. Grafik. Das Einfügen geschieht trotzdem durch Klicken, JavaScript bietet zum Glück diese Möglichkeit.
Aber genug der großen Schreibe, fangen wir an:
Erstmal hab ich hier ein kleines feines .zip- Archiv. Das enhält alle benötigten Dateien. Ohne gehts nicht. Also erster Schritt sollt sein, das .zip runterzuladen und zu entpacken:
verzieren (zip, 2 KB)
Innendrin sind 4 Textdateien. Die Smileys habe ich weggelassen. Wenn die gleichen Smileys wie bei mir benutzt werden sollen, könnt Ihr Euch die von meiner Seite speichern und bei Euch wieder hochladen.
Ich gehe aber davon aus, daß Ihr Eure eigenen Smileys benutzt wollt. Wie das geht, beschreibe ich ganz unten.
Es ist eigentlich ganz einfach. Es warten 4 Layout- Dateien darauf, angepaßt zu werden. Die erste wäre die Datei "JavaScript", die man unter "Site Layout" findet. Hier fügt einfach am Ende den Inhalt dieser Textdatei ein: 'script.txt'
Dann bin ich einen anderen Weg als beetfreeq gegangen und habe mir für die ganzen Edit- Funktionen einen neues Template gebaut. Das geht über den Punkt 'Add a custom skin' der Typ muß 'Story' sein und sollte 'EditButtons' (bitte auch auf Groß/Kleinschreibung achten) heißen - dort kommt dann der Inhalt der Datei 'editbuttons.txt' rein.
Als Drittes ist dann die Datei 'Comment Editor' unter 'Comments' anzupassen. Hier ändert erstmal die zweite Zeile:
Genauso müssen die 4 Zeilen aus der 'formende.txt' ans Ende der Datei eingefügt werden.
Damit sollte das Verzieren- Feld für Kommentare aktiviert sein. Vermutlich soll das aber auch beim Schreiben von Texten funktionieren. Dazu ist noch die 'story editor form' unter 'Stories' zu editieren. Dabei geht einfach genauso vor wie bei der 'Comment Editor'- Datei.
Jetzt kann man das Ganze schonmal testen. Die Grafiken werden noch nicht angezeigt, aber bei einem Klick sollte der entsprechende Code in Textfeld erscheinen.
Für das Einbinden eines eigenen Smileys braucht man erstmal einen eigenen Smiley. Den einfach als Datei hochladen. Ich beschreibe das einfach mal anhand von meinem Smiley 'smile_mrgreen.gif'. Wenn die Datei als Bild eingebunden wird, bekommt man folgenden Einfügecode:
Viel Spaß beim Ausprobieren und sollten noch Fragen bestehen, helfe ich natürlich mehr oder weniger gerne weiter.
Nachdem ich diese umgesetzt hatte, habe ich den Code verändert, meinem Geschmack angepaßt und herausgekommen ist am Ende das, was man jetzt rechts neben dem Editierkästchen sehen kann.
Da ich auch Smileys einbauen wollte, und mir die Buttons wegen ihrem Grau und der unterschiedlichen Breite nicht wirklich gefielen, bin ich umgestiegen auf die direkte Anzeige als Text bzw. Grafik. Das Einfügen geschieht trotzdem durch Klicken, JavaScript bietet zum Glück diese Möglichkeit.
Aber genug der großen Schreibe, fangen wir an:
Erstmal hab ich hier ein kleines feines .zip- Archiv. Das enhält alle benötigten Dateien. Ohne gehts nicht. Also erster Schritt sollt sein, das .zip runterzuladen und zu entpacken:
Innendrin sind 4 Textdateien. Die Smileys habe ich weggelassen. Wenn die gleichen Smileys wie bei mir benutzt werden sollen, könnt Ihr Euch die von meiner Seite speichern und bei Euch wieder hochladen.
Ich gehe aber davon aus, daß Ihr Eure eigenen Smileys benutzt wollt. Wie das geht, beschreibe ich ganz unten.
Es ist eigentlich ganz einfach. Es warten 4 Layout- Dateien darauf, angepaßt zu werden. Die erste wäre die Datei "JavaScript", die man unter "Site Layout" findet. Hier fügt einfach am Ende den Inhalt dieser Textdatei ein: 'script.txt'
Dann bin ich einen anderen Weg als beetfreeq gegangen und habe mir für die ganzen Edit- Funktionen einen neues Template gebaut. Das geht über den Punkt 'Add a custom skin' der Typ muß 'Story' sein und sollte 'EditButtons' (bitte auch auf Groß/Kleinschreibung achten) heißen - dort kommt dann der Inhalt der Datei 'editbuttons.txt' rein.
Als Drittes ist dann die Datei 'Comment Editor' unter 'Comments' anzupassen. Hier ändert erstmal die zweite Zeile:
<form method="post" action="<% response.action %>">
ab in:
<form name='form1' method="post" action="<% response.action %>">
Dann fügt eine leere Zeile an den Anfang der Datei ein und fügt dann dort die drei Zeilen aus der anhängenden DAtei 'formanfang.txt' ein.Genauso müssen die 4 Zeilen aus der 'formende.txt' ans Ende der Datei eingefügt werden.
Damit sollte das Verzieren- Feld für Kommentare aktiviert sein. Vermutlich soll das aber auch beim Schreiben von Texten funktionieren. Dazu ist noch die 'story editor form' unter 'Stories' zu editieren. Dabei geht einfach genauso vor wie bei der 'Comment Editor'- Datei.
Jetzt kann man das Ganze schonmal testen. Die Grafiken werden noch nicht angezeigt, aber bei einem Klick sollte der entsprechende Code in Textfeld erscheinen.
Für das Einbinden eines eigenen Smileys braucht man erstmal einen eigenen Smiley. Den einfach als Datei hochladen. Ich beschreibe das einfach mal anhand von meinem Smiley 'smile_mrgreen.gif'. Wenn die Datei als Bild eingebunden wird, bekommt man folgenden Einfügecode:
<% image name="smile_mrgreen" %>
Über die rechte Maustaste kann man außerdem die Grafikadresse kopieren - die brauchen wir ebenfalls und sie sieht so aus:
https://ericpp.blogger.de/static/antville/ericpp/images/smile_mrgreen.gif
Jetzt öffnen wir die eben angelegte Datei 'Edit Buttons' und schauen uns den Code für den mrgreen- Smiley genauer an:
<td height="30"><img src="https://ericpp.blogger.de/static/antville/ericpp/images/smile_mrgreen.gif" onclick='insert("<\% image name=\"smile_mrgreen\" \%>","")'></td>
Der Code für die Grafik ist schnell gefunden - er steht ganz einfach im <img src="...">
- Tag. Aber der Einfügecode für die Grafik sieht irgendwie ein weinig zerschossen aus, oder?
Nicht wirklich zerschossen, aber damit der Code richtig eingefügt wird, mußte ich ein paar Backslashes einfügen, damit der Code durch das Javascript richtig interpretiert wird. Also achtet darauf, daß Ihr das beim Anpassen der Editbuttons auch in Eurem Code so tut - und alles wird gut.onclick='insert("
<\% image name=\"smile_mrgreen\" \%>
","")'
Viel Spaß beim Ausprobieren und sollten noch Fragen bestehen, helfe ich natürlich mehr oder weniger gerne weiter.