Aus einer Frage auf WordPress.Stackexchange.com heraus habe ich ein kleines Plugin geschrieben. Mich hat es auch immer ein wenig genervt das der HTML-Editor von WordPress keine richtigen Tastaturkürzel hat. Es gibt lediglich Access-Keys, was bedeutet das beim Drücken einer bestimmten Tastaturkombination der Fokus vom Textfeld auf einen der Buttons in der Werkzeugleiste verlegt wird. Dadurch muss man noch einmal Enter drücken damit die Aktion ausgeführt wird. Zudem verrenke ich mir immer die Finger beim Drücken von z.B. [shift]+[alt]+[a]
um einen Link einzufügen. Mal ganz davon abgesehen das ich es mir nur sehr selten merken kann welche Tastaturkombination welche Aktion ausführt.
Als kleines Weihnachtsgeschenk für diejenigen die es brauchen können habe ich FrankenKey veröffentlicht. Das Plugin ist eher als “raft draft” anzusehen, also ein Entwurf für ein Plugin das noch im Fluss der Entwickelung ist. Wer es dennoch schon mal testen will oder sein eigenes Plugin darauf aufbauen möchte, ist gerne eingeladen daraus seine eigene Lösung zu erstellen.
Technisch gesehen ist das Plugin sehr simple aufgebaut. Die Tastatur wird mit mousetrap überwacht. Es gibt zwar noch ein jQuery Plugin namens jQuery Hotkeys welches auch von WordPress bereitgestellt wird, dieses ist aber nicht ganz so leistungsfähig wie mousetrap und ich habe es auch nicht richtig zum Laufen bekommen.
selection.js
übernimmt die Arbeit der Modifikationen im Text. Es ist ein jQuery-Plugin welches auf Code von Stackoverflow basiert. selection.js
liefert den ausgewählten Text und kann diesen zum Teil auch modifizieren (z.B. in Tags einschließen).
Die Kernkomponente frankenkey.js
arbeitet wie eine Weiche. Hier werden die Bindungen zwischen Textfeld und mousetrap angelegt und letzten Endes auch die Tastatureingaben verarbeitet. Wird eine Tastaturkombination erkannt, wird zuerst entschieden ob es sich um eine Kombination zum Einfügen von Tags oder eines simulierten Klicks auf einen der Buttons handelt. Grundsätzlich hätte man das Script so gestalten können, dass es lediglich Klicks auf die Buttons in der Werkzeugleiste simuliert. Dadurch das eigene Aktionen definiert werden, können auch andere HTML-Tags als die vordefinierten verwendet werden.
Mich würde mal interessieren ob es so was überhaupt braucht oder ob es völlig überflüssig ist. Was denkt ihr darüber?
2 Trackbacks
[...] ein Plugin, diesmal von Ralf Albert. Mit dem sog. FrankenKey kann man eigene Tastenkürzel für den Text-Editor, formerly known as HTML-Editor, [...]
[...] ein Plugin, diesmal von Ralf Albert. Mit dem sog. FrankenKey kann man eigene Tastenkürzel für den Text-Editor, formerly known as HTML-Editor, [...]