WordPress: Die Quicktags anpassen

15 Kommentare

Auch wenn einige WordPress-Nutzer mittlerweile den WYSIWYG-Editor einsetzen und es möglich ist, mittels Plugins, die Quicktags-Leiste komfortabel zu erweitern, so lohnt es sich dennoch einen Blick in die Datei quicktags.js zu werfen.

Die für die Quicktags zuständige Datei befindet sich im Ordner /wp-includes/js/. Es handelt sich hierbei um eine Javascript-Datei und somit ist es möglich diese Datei mit einem Texteditor zu bearbeiten.

Nach der Installation von WordPress, hat man die Möglichkeit sich für die Textansicht in WordPress zu entscheiden. Dafür muss man in “Einstellungen” » “Schreiben” die Checkbox mit dem Namen “Benutzer sollen den WYSIWYG-Editor als Standard benutzen” deaktivieren und die Checkbox “WordPress soll falsch verschachteltes XHTML automatisch korrigieren” aktivieren.

Danach zu dem Menüpunkt “Benutzer” » “Dein Profil” wechseln und ganz unten die Checkbox “Benutz den WYSIWYG-Editor beim Schreiben” deaktivieren. In beiden Fällen ist es notwendig, die Änderungen auch zu bestätigen, indem man die Buttons “Einstellungen aktualisieren” bzw. “Profil aktualisieren” betätigt.

Standardmäßig schaut die Quicktag-Leiste folgendermaßen aus:

Die Quicktags-Leiste beim Start

Die Begriffe sind immer noch in englisch, da hier die deutsche Sprachdatei nicht greift. Und mit dem besagten Plugin kann man nur zusätzliche Quicktags hinzufügen und diese Hinzugefügten auch löschen. Aber auf die bestehenden Quicktags hat das Plugin keinen Einfluss. Daher ist es notwendig sich die quicktags.js anzuschauen. Wenn man die Datei öffnet, sieht man in der Zeile 36-42 den ersten Ansatzpunkt:

edButtons[edButtons.length] =
new edButton('ed_strong'
,'b'
,'<strong>'
,'</strong>'
,'b'
);

Mit diesem Code wird Quicktag erzeugt, der einen Abschnitt mit <strong> auszeichnet oder wie manche sagen würden “fett machen”. Wobei das “einfetten” erstmal zweitrangig ist, denn mit <strong></strong> kennzeichnet man einen Bereich der besonders wichtig ist oder welchen man besonders hervorheben will.

Der Code besteht aus sechs Zeilen. In der zweiten Zeile wird der jeweilige Quicktag benannt und in der dritte Zeile sieht man ein 'b', dieser Buchstabe ist auch derjenige den man in der Quicktag-Leiste sieht. Hier könnte man z. B. 'F' eintragen. In der vierten und der fünften Zeile sieht man die Start- und die End-Markierung und in der sechsten Zeile sieht man noch mal den Buchstaben 'b'. Allerdings bezieht sich dieses zweite 'b' auf einen Tasten-Kürzel: mit Alt + b kann man auf der Tastatur diesen Quicktag aktivieren.

Nach dem gleichen Schema sind auch die Quicktags für “kursiv” (einfache Hervorhebung: <em></em>, Zeile 44-50), für Zitat (<blockquote></blockquote>, Zeile 60-66), nicht mehr aktueller Inhalt (<del></del>, Zeile 69-75), neu eingefügter Inhalt (<ins></ins>, Zeile 77-83), für Aufzählungsliste (<ul></ul>, Zeile 94-100), für nummerierte Liste (<ol></ol>, Zeile 102-108), für Listenelement (<li></li>, Zeile 110-116) und für Code-Beispiele (<code></code>).

Attribute

Die Quicktags für del und ins generieren zusätzlich noch das datetime-Attribut:

edButtons[edButtons.length] =
new edButton('ed_del'
,'del'
,'<del datetime="' + datetime + '">'
,'</del>'
,'d'
);

Auf die Angabe des Zeit-Attributs kann man auch verzichten und dann würde es so ausschauen:

edButtons[edButtons.length] =
new edButton('ed_del'
,'del'
,'<del>'
,'</del>'
,'d'
);

Escape-Zeichen

Die Quicktags für das Zitat, die Listen und Listenelemente beinhalten noch zusätzlich Escape-Zeichen, z. B.:

edButtons[edButtons.length] =
new edButton('ed_li'
,'li'
,'\t<li>'
,'</li>\n'
,'l'
);

Das Escape-Zeichen \t bewirkt, dass der Cursor, bevor er die Start-Markierung setzt, zuerst eine Tabulator-Breite nach rechts “springt”, dadurch wird eine Einrückung für die Listenelemente im Quelltext erreicht. Das Escape-Zeichen \n bewirkt einen Zeilenumbruch im Quelltext. Weitere Escape-Zeichen kan man hier sehen. Die Escape-Zeichen sind in Javascript und PHP die gleichen.

Elemente ohne Abschließenden Tag

Elemente die keinen abschließenden Tag haben oder Konstrukte die einen Abschluss nicht benötigen, bekommen eine zusätzliche Zeile mit dem Wert -1:

edButtons[edButtons.length] =
new edButton('ed_more'
,'more'
,'<!--more-->'
,''
,'t'
,-1
);

Zusätzlich ist der Wert, wo üblicherweise der abschließende Tag notiert wäre, leer.

Externe Dienste abfragen

Ab der Zeile 250-263 findet sich eine interessante Funktion:

if (word == '') {
word = prompt('Enter a word to look up:', '');
}
if (word !== null && /^\w[\w ]*$/.test(word)) {
window.open('http://www.answers.com/' + escape(word));
}
}

function edToolbar() {
document.write('<div id="ed_toolbar">');
for (i = 0; i < edButtons.length; i++) {
edShowButton(edButtons[i], i);
}
document.write('<input type="button" id="ed_spell" class="ed_button" onclick="edSpell(edCanvas);" title="Dictionary lookup" value="lookup" />');

wenn man jetzt die vier hervorgehobenen Stellen (fett) durch:

  1. Bitte das Suchwort eingeben:
  2. http://de.wikipedia.org/wiki/
  3. Wikipedia-Hilfe
  4. ?

ersetzen würde, dann hätte man die Möglichkeit, während des Schreibens nach einem Wort inerhalb von Wikipedia.de zu suchen. Entweder in dem man ein Wort in der Textbox des Beitrages markiert und dann auf ? klickt oder indem man zuerst ? betätigt und dann in der Box das Suchwort eintippt.

Anstatt Wikipedia könnte man auch andere Dienste einbinden. Zum Beispiel Google, man müsste dann http://www.google.de/search?hl=de&q= in die entsprechende Zeile eintragen. Um herauszufinden welche URL man eintragen muss, reicht es in den von mir getesteten Fällen, einfach den bevorzugten Dienst aufzurufen und zu schauen wie er das Suchwort beim Ergebnis in der URL einbindet.

Alle offenen Quicktags schließen

In der Zeile 264 findet sich der Code für den Quicktag, der alle offenen Anweisungen schließt:

document.write('<input type="button" id="ed_close" class="ed_button" onclick="edCloseAllTags();" title="Close all open tags" value="Close Tags" />');

Fazit

Diese Methode ist zwar nicht die bequemste, aber Sie bietet viele Möglichkeiten. Man kann neue Quicktags einfügen, alte löschen oder deaktivieren (/* … */, die gleichen Kommentare wie bei CSS auch) und die bestehenden anpassen. Vor allem kann man die Quicktags an den Stellen anpassen wo das Quicktag-Plugin nicht greift, z. B. bei den Tastatur-Kürzeln oder beim Tooltip.

Ich habe Beispielhaft die quicktag.js bearbeitet und diese stelle ich für Leute, die es interessiert als “Anschauungsmaterial” im Download-Bereich zur Verfügung. Hier ein Screenshot der neuen Quicktag-Leiste:

Die bearbeitete Quicktag-Leiste

Ich habe einige Quicktags deaktiviert und einige angepasst:

  • F: sehr wichtig (fett)
  • K: wichtig, hervorgehoben (kursiv)
  • Link: ein Verweis
  • Zitat: sollte klar sein
  • Bild: dito
  • • Liste: Aufzählungsliste
  • 1. Liste: nummerierte liste
  • Listenpunkt: ein Listenelement innerhalb einer Aufzählungsliste oder einer nummerierte Liste
  • Code: Codebeispiel
  • Mehr…: Aufteilung des Beitrages in einen sog. Teaser und dem Rest des Beitrages
  • ?: Wikipedia.de-Hilfe
  • </>: alle offenen Anweisungen schließen

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Schlagwörter: ,

15 Kommentare

  1. Die Möglichkeit die Quicktag-Leiste zu editieren finde ich ebenfalls sehr praktisch, auch für häufig benutzte Sonderzeichen oder für das Umschließen mit korrekten Anführungszeichen etc.

    Da ich viele Videos in mein Blog einbinde, und mich immer ärgere, dass die Videohoster den Quellcode nicht standardkonform anbieten, hab ich mir auch eine Video-Taste gebastelt, die mich nur noch nach der swf-Adresse des Videos fragt und den Code dann, wie hier beschrieben, korrekt einbaut.

    Dazu habe ich in der quicktags.js folgende Zeilen hinzugefügt:

    edButtons[edButtons.length] =
    new edButton('ed_video'
    ,'video'
    ,''
    ,''
    ,'i'
    );

    […]

    function edInsertVideo(myField, i, defaultValue) {
    if (!defaultValue) {
    defaultValue = 'http://';
    }
    if (!edCheckOpenTags(i)) {
    var URL = prompt('Enter the Video URL' ,defaultValue);
    if (URL) {
    edButtons[i].tagStart = '[via <a href="' + URL + '">';
    edButtons[i].tagStart = '<object type="application/x-shockwave-flash"
    style="width:425px; height:350px" data="' + URL + '"><param name="movie" value="' + URL
    + '" /></object>';
    edInsertTag(myField, i);
    }
    }
    else {
    edInsertTag(myField, i);
    }
    }

  2. Gerade noch gesehen, dass in dem von mir geposteten Code eine Zeile zuviel drin ist:
    edButtons[i].tagStart = ...
    steht zweimal drin, die erste davon, die mit dem via-Link, muss natürlich raus.
    Da ist mir beim quicktag.js-Editieren wohl ein Copy-and-Paste-Fehler passiert, der natürlich keinen Schaden angerichtet hat (und mir deshalb bisher nie auffiel), weil die 2. Zeile ja die 1. überschreibt, aber die 1. ist definitiv überflüssig.

  3. Ich mag mich mit dem WYSIWYG-Editor auch nicht anfreunden und habe meine Quicktagleiste ebenfalls auf meine persönlichen Bedürfnisse angepaßt. Sehr fein läßt sich da auch der Pfad anpassen für Bilderpfade:

    function edInsertImage(myField) {
    var myValue = prompt('Bitte Bild-URL angeben', 'http://www.gabis-bloghaeuschen.de/bilder/');
    if (myValue) {
    myValue = 'class="rand" src="'
    + myValue
    + '" alt="' + prompt('Bildbeschreibung', '')
    + '" />';
    edInsertContent(myField, myValue);
    }

    …und gleichzeitig kann man auch hier noch ein bißchen was dazulegen, z.B. die css-Klasse, die ich Bildern in den Beiträgen zugewiesen habe. Und zum Schluß wird der Bilder-Einfügen-Dialog auch noch übersetzt 🙂

  5. @Roland,

    Vor allem kann man die Quicktags an den Stellen anpassen wo das Quicktag-Plugin nicht greift, z. B. bei den Tastatur-Kürzeln oder beim Tooltip.

    Zitat aus dem “Fazit” des Beitrages. Mit dem Quicktag-Plugin habe ich den gemeint, den du gerade verlinkt bzw. erwähnt hast.

    Noch etwas kann das Plugin nicht:

    Die Begriffe sind immer noch in englisch, da hier die deutsche Sprachdatei nicht greift. Und mit dem besagten Plugin kann man nur zusätzliche Quicktags hinzufügen und diese Hinzugefügten auch löschen. Aber auf die bestehenden Quicktags hat das Plugin keinen Einfluss. Daher ist es notwendig sich die quicktags.js anzuschauen.

  9. Tolle Sache mit den Quicktags. Mir ist allerdings aufgefallen, dass im <a>-Tag das title-Attribut fehlt. Da ich das gerne dabei haben wollte, habe ich die vorletzte Funktion (edInsertLink(...)) entsprechend angepasst.

    Hier ist der Code, sofern es jemanden interessiert:

    function edInsertLink(myField, i, defaultValue) {
    if (!defaultValue) {
    defaultValue = 'http://';
    }
    if (!edCheckOpenTags(i)) {
    var URL = prompt('Die URL:' ,defaultValue);
    var TITLE = prompt('Der Linktitel:' ,'');
    if (URL) {
    edButtons[i].tagStart = '<a href="' + URL + '" title="' + TITLE + '">';
    edInsertTag(myField, i);
    }
    }
    else {
    edInsertTag(myField, i);
    }
    }

    Ich bin zwar keine JavaScript-Leuchte, aber es funktioniert.

    Zum Abschluss noch ein Tipp, wo doch hier soviel Code verwendet wird. Ich habe mir das Plugin: Code Converter von Frank Bueltge runtergeladen, mit dem man schnell die Sonderzeichen maskieren kann.

  10. Danke für diese simple Anleitung. Allerdings würde es mich jetzt brennend interessieren, wie ich eine zweite Zeile an Quicktags “eröffnen” kann. Hätte gerne in der ersten Zeile die Standard-Tags, und in der zweiten dann häufig gebrauchte Sonderzeichen oder ähnliches…

    Alternetiv bin ich am überlegen, die Sonderzeichen an anderer Stelle zu platzieren, bspw. unter das Textfeld (also zw. Eingabefeld und dem Schlagwort-Eingabefeld.

    Würde aber die Methode nehmen, die erstmal einfacher umzusetzen wäre 🙂 Weil js kann ich kaum 😆

    Danke schonmal,

    MfG kleinPhi

  12. […] Werkzeuge. Auch im HTML-Modus gibt es dank der vorhandenen und anpassungsfähigen Quicktags gute Erweiterungsmöglichkeiten. HTML-Mode im […]

  13. Kann man auch ein Drop Down Menü damit machen. Also ich klicke z.B. auf einen Button ‘Design’ und es erscheint eine Liste mit sagen wir mal 20 Einträgen. Jeder Eintrag fügt dann einen anderen Code hinzu. Würde das gehen? Danke

Kommentare sind geschlossen.