Eigenes Quicktag schreiben

Hallo!

Schau dir mal buttonsnap an. Damit lässt sich sehr einfach in beide Formen (WYSIWYG und "normaler"-Editor) ein Button einbinden.

Zitat von daroy

Habe buttonsnap getestet. So wie ich das sehe, bietet es aber auch nur die Möglichkeit einen Anfangs- und einen End-Tag zu definieren (jedenfalls ohne das ich mich jetzt weiter in Javascript vertiefe). Hätte aber gerne das gleiche wie dem dem "Link" Quicktag. Ein popup, bei dem ich das fehlende Element eingeben kann, das dann an der richtigen Stelle eingesetzt wird.
Eigentlich ist das ja genau das Link Quicktag, nur in ein bisschen veränderter Form.

Dann soltest du dich mit dem JavaScript noch mal beschäftigen. Für den myGallery Quicktag verwende ich auch buttonsnap - und damit rufe ich einen ganzen Bilderbrowser auf, der als Popup-Fenster erscheint...

Zitat von daroy

( ... ) insofern dachte ich, jemand könnte mir helfen durch das Script eines Links in der quicktag.js durchzusteigen.

Möchtest du die Kurzform, oder ausführlich.
Mal eben erklärt ist das nicht.

Also die Kurzform.

0.) quicktags.js Backup anlegen !

1.) Zeile 52:
Bestimmt Button.
Kopieren und eigenen Quicktag zaubern.

[FONT="Courier New"]edButtons[edButtons.length] = 
new edButton('ed_link'  // zB. [COLOR="Red"]ed_mylink[/COLOR]
,'link'  // zb. [COLOR="Red"]MyLink[/COLOR]
,''
,'</a>'
,'a'
); // special case[/FONT]

2.) Zeile 158:
[FONT="Courier New"]function edShowButton(button, i)[/FONT]

Eine weitere if/else Abfrage einfügen nach Zeile 164
dabei die darüberliegende kopieren und so ändern:

[FONT="Courier New"]else if (button.id == '[COLOR="Red"]ed_mylink[/COLOR]') {
 document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="[COLOR="Red"]edInsertmyLink[/COLOR](edCanvas, ' + i + ');" value="' + button.display + '" />');
}[/FONT]

3.) Jetzt noch die passende Inputboxfunktion.
Zeile 364:
Kpl. Funktion kopieren und eigene erstellen.
zB.

[FONT="Courier New"]function [COLOR="Red"]edInsertmyLink[/COLOR](myField, i, defaultValue) {
	if (!defaultValue) {
		defaultValue = '[COLOR="Red"]http://www.site.com/subfolder/subsub/[/COLOR]';
	}
	if (!edCheckOpenTags(i)) {
		var URL = prompt('Enter the URL' ,defaultValue);
		if (URL) {
			edButtons[i].tagStart = '<a href="' + URL + '">';
			edInsertTag(myField, i);
		}
	}
	else {
		edInsertTag(myField, i);
	}
}[/FONT]

Speichern. Prüfen ob Button vorhanden ist. Ende Gelände.

Ich will den <center> Befehl einfügen und habe bereits

edButtons[edButtons.length] = 
new edButton('ed_center'
,'zentriert'
,'<center>'
,'</center>'
,'x'
);

eingefügt.

Ich habe jetzt keinen weiteren Verweis in der quicktags.js gefunden, denn ich anpassen oder ergänzen muss.

Was nun ?

PS
Zudem frage ich mich eh, warum den <center> nicht standard im Editor ist.

Danke & Gruss
tboggi

Zitat von jottlieb

Weil das oldschool-HTML ist von dem nicht nichmal erwarten würde, dass er XHTML-valide ist.

aha, wie ist denn der XHTML-valide befehl und wo gibt's ne Referenz ?

ABER, ändert ja nichts an der Tatsache, dass der Befehl "zentrieren" nicht enthalten ist !!

tboggi

ja sehr gut :)

zwar ausführlicher aber gefällt mir besser, da es ja den css codes nahe ist.

Jetzt weißt du sicherlich noch, wie ich den Tag einbaue, oder ;-)

align="center" ist genau so obsolet wie <center>. XHTML ist Struktur-Markup. Zwar erlaubt XHTML 1.0 Transitional die beiden noch als Übergangslösung. Aber generell sollte man bei einer XML-Orientierung die Style-Definitionen ausgliedern, eben in CSS. Deswegen: entweder style="align: center;" oder besser class="center" und .center im CSS definieren. Letzteres hat den Vorteil, dass das XHTML nicht mit CSS verhunzt ist. Dann muss man keine CSS-Fragmente aus dem Code popeln, wenn sich das Design ändert oder wenn man alternative Stylesheets definiert.

ÄÄh, so genau hab ich das jetzt nicht ausprobiert, WEIL

sich Schritt 2 und 3 ja auf "links" bezieht und ich einen Verweis a la "Fett" oder "Kursiv" gesucht habe.
Demnach bin ich davon ausgegangen, dass es Unterschiede zwischen den Formatierungen und den Links gibt.

Ad-Quicktags-Plugin

klappt, ich dachte das plugin wäre nur für den WYSIWYG Editor.

nochmal zu jottlieb:

gehe ich davon aus, das über <p style="..."> die befehle reinkommen, die ich auch in css eintrage ?