RSS Feed

WordPress Plugin Code Editor

17.05.2007 by naden

Wer bei oft Code remote bearbeiten muss und nicht immer einen FTP-Zugang benutzen kann, der wird sich, wie ich, schon oft über den sehr spartanischen Theme- und Plugin- geärgert haben. Ohne Zeilennummern und Syntax Highlighting fühlt man sich dabei schlimmer als mit vi.

Ich habe aufbauend auf der wunderbaren Codepress-Bibliothek von Fernando M.A.d.S. und Michael Hurni, die Zeilennummern und für CSS, HTML, Java, Javascript, Perl, Php, Ruby und Sql mitbringt ein simples WordPress Plugin programmiert, was diese Funktionalitäten für den WordPress Theme-Editor und den Plugin-Editor schmerzlos nachrüstet.

Das Ergebnis kann sich sehen lassen:
wordpress-theme-editor.jpg

Das Plugin erkennt, ob man sich im Theme-Editor “theme-editor.php” oder Plugin-Editor “plugin-editor.php” befindet und fügt nur dann den benötigten Javascript-Code ein. Für weitere Funktiondetails siehe den Sourcecode.

Installation:

  1. Download des Plugins.
  2. Plugin entpacken und nach /wp-content/plugins/code-editor hochladen.
  3. Unter Plugins im Adminstrationsbereich aktivieren.
  4. Fertig!

Sobald ein Template oder ein Plugin bearbeitet wird, steht, Javascript vorrausgesetzt, ein vollwertiger Editor zur Verfügung, der sogar die Benutzung des Tabulators (hurra!) erlaubt und diverse Shortcuts unterstützt.

Update am 21.01.2009 auf Version 1.2
Das Update bringt keine neuen funktionen, aber dafür eine besser gekapselte Codebase.

Wird WordPress wie hier beschrieben in einem UnterVerzeichnis auf dem Server abgelegt und so konfiguriert, das es trotzdem über die Domain aufrufbar ist, so liefert der Aufruf von get_bloginfo(‘url’) einen falschen Pfad, an den richtigen kommt man mit get_bloginfo(‘wpurl’) heran. Die wenigsten werden dieses Minor-Update einspielen müssen, wer es braucht.
Download

Teile diesen Beitrag

Folge mir

TwitterGoogle+XingFacebookRSS-Feed

Ähnliche Beiträge


76 Kommentare »

  1. Mal eben so programmiert… Mein Respekt, ehrlich!

    Könnte ich damit auch die htaccess bearbeiten, bspw.?
    Oder beliebige andere Dateien im Verzeichnisbaum?

  2. [...] etc. Naden hat mich via Kommentar darauf hingewiesen, dass er auf Basis von CodePress ein WordPress-Plugin erstellt hat. Ich habe es nicht getestet, aber für Leute, die gerne online ihre Dateien bzw. [...]

  3. [...] Server zurückzuspielen, ist es einfacher, dies schnell online zu bewerkstelligen. Dank des genialen Code Editor-Plugins von naden ist genau das nun möglich. Die Erweiterung basiert auf dem Online-Editor CodePress. [...]

  4. Markus sagt:

    Genial. Vielen Dank für dieses sinnvolle Plugin.

  5. [...] öfter direkt in WordPress an seinem Themes bastelt, kann nun CodePress durch diesen Plugin mit WordPress [...]

  6. [...] WordPress Plugin Code Editor Syntax Highlighting, Tabulatur-Benutzung, Shortcuts, yeah! (via) (tags: wordpress wp-plugins plugin code html css php) Verwandte Einträge No Related Posts [...]

  7. [...] prima Plugin: Codepress for WordPress [...]

  8. Markus sagt:

    Das Plugin hat bei mir zwar erst funktioniert nachdem ich mich aus- und wieder eingeloggt hab.

    Aber trotzdem: Sehr geiles Teil :)

    Vielen Dank

  9. prinzzess sagt:

    installiert und: funktioniert!
    vielen dank dafür! :-)

  10. missi sagt:

    Wunderbar, vielen Dank dafür. :)
    Läuft sauber, soweit ich das jetzt im Schnelltest beurteilen konnte. :)

  11. [...] WordPress Code Editor: Syntax-Highlighting im Theme und Plugin Editor [...]

  12. [...] – WordPress Plugin Code Editor für WordPresser, die den Komfort des Code-Editors gern erhöhen wollen. (tags: PHP Editor [...]

  13. [...] WordPress Code Editor: Syntax-Highlighting im Theme und Plugin Editor [...]

  14. Florian sagt:

    Danke, ein sehr schönes plugin und es funktioniert wunderbar.

  15. naden sagt:

    Danke für das durchweg positive Feedback :)

    @Kopfschüttler
    Man kann nur die Template- oder Plugin-Dateien bearbeiten, da sich das Plugin ja nur in den vorhandenen Editor einklinkt.

    Tatsächlich habe ich vor einigen Monaten ein Plugin gebaut, was als Editor für die .htaccess und die robotx.txt dient. Ich werde es bald mal posten.

    @markus
    Ich denke, das lag dann am Caching des Browsers oder am WordPress-Cache, fals du das installiert hast.

  16. Sven sagt:

    Da ich WordPress in einem eigenen Unterverzeichnid installiert habe, funktioniert das Plugin so nicht. Man muss dafür in der Datei code-editor.php folgende Änderung machen machen: get_bloginfo(‘url’) durch get_bloginfo(‘wpurl’) ersetzen.

  17. naden sagt:

    @sven
    ich finde das recht merkwürdig, da ich meinen Blog auch in einem Unterverzeichnis http://www.naden.de/blog laufen habe und es funktioniert.

    Der folgende Code

    var ce_url = ‘http://www.naden.de/blog’;

    erfasst bei mir die Domain und das Unterverzeichnis richtig.

    Welche WordPress Version nutzt du?

  18. Sven sagt:

    Ich nutze WordPress 2.2

    In meinen Einstellungen habe ich folgendes eingetragen:
    WordPress-Adresse: http://www.seven.lu/wp
    Blog-Adresse: http://www.seven.lu

    Vielleicht haben wir uns auch falsch verstanden. Ich meinte jedenfalls, dass ich sämtliche WordPress Dateien in ein Unterverzeichnis auf dem Server gelegt habe (/wp) wie es hier beschrieben ist: http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory

    Da dein Plugin demnach im Verzeichnis /wp/wp-content/plugins/code-editor liegt, muss man die Variable ce_url mit get_bloginfo(’wpurl’) initialisieren (=WordPress-Adresse).

  19. naden sagt:

    @sven
    Da habe ich dich in der Tat nicht richtig verstanden. Danke für den Hinweis, ich werde das Plugin entsprechend anpassen.

  20. [...] WordPress Plugin Code EditorÄußerst nützliches WP Plugin [...]

  21. Viktor sagt:

    hi,
    das plugin geht bei mir nicht :(

    hab WordPress 2.2, liegt unter http://viktor-dite.de/…/miZine/ und ist direkt über http://mizine.de erreichbar.
    WP URL ist http://mizine.de
    BLOG URL ist ebenfalls http://mizine.de

    Weder die eine noch die andere Version funktionieren — weder mit noch ohne Tigerstyle

  22. Viktor sagt:

    Das Problem hat sich erledigt und lag am Safari Browser (trotz version 3)

    Das Plugin funktioniert wunderbar mit Firefox und WordPress2.2

    danke!

  23. naden sagt:

    Ich freue mich und spare mir einen unsachlichen Kommentar zum Mac. :)

  24. [...] andere gute Idee für WordPress. Naden nahm den JavaScript Code Editor CodePress und baute daraus eine Erweiterung für das bearbeiten der Themes und Plugins. Nicht das in diesem Blog viel an dem Code geschraubt wird aber wenn dann macht es sich schon um [...]

  25. [...] Zeilennummern und Syntaxhervorhebung ist das sehr mühsam. Heute fand ich ein tolles Plugin bei http://www.naden.de, was genau die erwähnten Funktionen in WP integriert. Die Installation läuft denkbar einfach ab: [...]

  26. Jens sagt:

    Hallo naden,
    mit Plugin-Programmierung kenne ich mich noch nicht so aus, aber wäre es möglich, auch den Texteditor von WP mit Zeilennummern und farbiger Syntax auszustatten? Ich hatte als erstes den tiny-Editor abgeschaltet und schreibe meine Texte in eine ganz normale Textarea-Box. Wäre natürlich genial, wenn das auch gehen würde. Ich finde so schon, dass dieses Plugin zu den Top10 gehört! Klasse Arbeit!

    LG,
    Jens

  27. naden sagt:

    @jens, es ist kein Problem, den normalen Editor auf zu werwandeln.
    Dazu sind nur marginale Änderungen am Code nötig:

    code-editor.php
    Ersetze ‘plugin-editor.php’ durch ‘post.php’ und ‘theme-editor.php’ durch ‘post-new.php’.

    code-editor.js
    Ersetze ‘template’ durch ‘post’ und ‘newcontent’ durch ‘content’.

    Wenn du diese Änderungen durchgeführt hast, ist der Editor allerdings nicht mehr für Templates oder Plugins zu gebrauchen.

    Ich kann bei Gelegenheit mal eine neue Version bauen, wo man optional auch den normalen Editor hooken kann.

  28. [...] WordPress Code Editor [...]

  29. [...] CodePress Ã¦ËœÂ¯Ã¤Â¸â‚¬Ã¤Â¸ÂªÃ¥Â®Å’全用 Javascript 写成的 HTML Textarea 增强程序,利用它,你只需要简单的修改,就可以将你网页中的 Textarea 变成一个支持语法高亮的程序编辑器。CodePress 完全开源,非常容易集成。 [...]

  30. DANKE! DANKE! DANKE!

  31. [...] habe ich hier etwas über CodePress und das Plugin von naden.de geschrieben, aber es ist nicht angekommen. Aus diesem Grund (und noch ein paar anderen), die ich [...]

  32. [...] puedes editar tu código fuente bien formateado tanto dentro de wordpress como en una página aparte.Soporta ASP, C#, CSS, HTML, Java, JavaScript, Perl, PHP, Ruby, SQL y [...]

  33. [...] 1. Eklentiyi indir. 2. code-editor klasörünü plugins dizinine açın. ( /wp-content/plugins/code-editor ) 3. Admin panelinden Eklentiyi aktifleÅŸtirin. WordPress Code Editor 1.1 Henüz kimse indirmemiş.. Kaynakça codepress Plugin Code Editor [...]

  34. [...] noch wird der Code gehighlighted (eingefärbt). Doch genau diese zwei wichtigen Dinge ändert das Code Editor Plugin von Naden [...]

  35. [...] Adsense-Deluxe Follow-URL Google Sitemaps semmelstatz2 Spam Karma 2 Spreadshop SyntaxHighlighter WordPress Code Editor XSD Snapr [...]

  36. TomTom sagt:

    Sehr schönes Plugin, nun kann man auch mal von unterweg an seiner HP arbeiten. Danke

  37. Brodelberg sagt:

    Nun ist das editieren des Codes auf jeden Fall etwas komfortabler, und macht zumindest in meinem Fall das php Progi überflüssig. Gut gemacht. :)

  38. naden sagt:

    Ja, es macht das Editieren sehr viel komfortabler. Einzig eine Suche müsste ich mal nachrüsten.

  39. Ingo sagt:

    einfach nur Danke, genial

  40. Robert sagt:

    Hab ein Problem: wenn ich mit dem WP-Editor zB Themes bearbeite, werden zusätzliche Zeilenumbrüche gespeichert. So wird aus

    text
    text
    text2

    nach dem Speichern

    text

    text

    text2

    Kann es sein, dass dies durch das Code-Plugin verursacht wird? Danke für jede Hilfe!

  41. naden sagt:

    @robert ich kann das Problem leider nicht nachstellen. Ich habe DOS/Unix Dateiformate auf Linux und Windows getestet. Eventl. hast du ja Details bzw. schickst mir mal eine Testdatei.

  42. Robert sagt:

    ich hatte schon befürchtet, dass du es nicht nachvollziehen kannst. Danke trotzdem für deine Hilfe – werde versuchen, zusätzliche Infos zu bekommen…

  43. naden sagt:

    @robert, solltest du was finden, dann fixe ich das gerne.

  44. STop sagt:

    Wow! Great plugin! You actually made a real code editor for WP!
    Would there be any way to make it display whitespace and indentation lines (like Scintilla-based editors do)?

    Vielen Dank!

  45. naden sagt:

    @stop Thanks for the compliment. I just wrote the plugin which is heavely based on the Codepress library by Fernando M.A.d.S. and Michael Hurni. Afaik there is no option to modify the whitespaces etc. the way you want it. Maybe you can try to patch the codepress library directly to fit you needs.

  46. Askhari sagt:

    Vielen Dank für das großartige Plugin. Da ich durch Ausbildung usw oft die PCs wechseln muss versuche ich kleine Wartungsarbeiten immer dort zu verrichten wo ich gerade bin, und dein Code-Highlighter hat mir soeben das Leben um einiges leichter gemacht :)

  47. naden sagt:

    @Askhari Super dass es hilft. Ich schicke dir eine Rechnung! ;)

  48. [...] wurde ich hier von einem Theme-Editor in WordPress, dem in seiner Standardausgabe vielleicht etwas Syntax-Highlightning [...]

  49. [...] jetzt das Plugin WordPress Code Editor gefunden. Scheint gut zu funktionieren. Ich werde das mal ein wenig [...]

  50. FuNKeR sagt:

    Das Plugin ist für mich wirklich nützlich. Hab vorhin noch drüber gebloggt, dass mich das nervt und kurz darauf finde ich, was ich suche mit deinem Plugin.

    Vielen Dank.

  51. naden sagt:

    @funker, freut mich. Ich sag ja immer, darüber reden (schreiben) hilft oft :)

  52. micha sagt:

    viele dank für dieses wirklich nützliche plugin. läuft wunderbar.

    gruß micha

  53. Karsten Treu sagt:

    Danke für das Plugin! Hab lang nach sowas gesucht, aber die Search-Funktion im wordpress.com Repository ist wirklich nicht das gelbe vom Ei. Gerade wenn man auswärts an fremden Rechnern schnell was ändern möchte, ist das Plugin wirklich perfekt.

  54. Konstantin sagt:

    Wow, bin begeistert. Mich hatte das schon immer genervt, dass der Theme-Editor so triste ist und man schlecht darin was ändern kann. Die Zeiten sind nun vorbei ;) Danke dir

  55. Felix sagt:

    Danke für das Plugin… Lohnt sich wirklich ! ! !

  56. ddan sagt:

    Ich möchte mich auch erst einmal für das tolle Plugin bedanken. So wie es aussieht, wird es wohl in 2.8 standardmäßig enthalten sein. Leider funktioniert es bei mir nicht im Safari Version 3.2.1 (5525.27.1) – gibt es da nen Trick oder Workaround oder Patch? Das wäre echt klasse!

  57. naden sagt:

    @ddan, dass wie WordPress Entwickler die Idee adaptieren macht Sinn, Matt hatte mal in seinem Blog über das Plugin geschrieben, war wohl nur eine Frage der Zeit.

    Ich habe kein Safari, kann dir also leider keinen Tipp geben.

    Das Plugin benötigt Javascript und davon eine ganze Menge. Eventl. kommt dein Safari damit nicht klar?

  58. Daniel sagt:

    Bestes Plugin ever! DANKE
    Das erleichtert mir die Arbeit um einiges!

  59. naden sagt:

    @daniel, danke für das Kompliment. Ich empfehle dir die folgende Seite: http://www.naden.de/blog/donate

  60. Dennis sagt:

    Das Plugin ist genial! Ich habe mich auch seeeehr schon lange über den Theme-Editor geärgert. Jetzt ist damit endlich Schluss. Vielen Dank und Kompliment..
    Gruß Dennis

  61. naden sagt:

    @dennis, danke ist sogar so gut, dass diese Funktion in WordPress 2.8 standardmäßig integriert sein wird.

  62. Dennis sagt:

    @naden: Das wurde aber auch Zeit – dann kann ich meinen Artikel über das Plugin: http://www.follow-blog.de/geniales-plugin-fur-den-theme-editor-in-wordpress
    ja gleich mal ergänzen..Hihi

    Danke für den Hinweis und beste Grüße
    Dennis

  63. naden sagt:

    @dennis, ja, finde ich auch gut. Allerdings hätte ich mich über eine Erwähnung gefreut, zumal Matt einmal über das Plugin berichtet hatte … Inspiration kommt selten von oben.

  64. fragolina sagt:

    Ein tolles Plugin!! Vielen Dank!
    sonst hab ich den Quellcode immer rauskopieren und in einem Editor betrachten müssen :-)
    liebe Grüße

  65. ovidiu sagt:

    servus. bin ueber google heir gelandet, geiles plugin. wordpress hat naemlich ab 2.8.1 den syntax highlighter wieder deaktiviert/ausgebaut :-(

    hab grad dein Plugin aktiviert, sehe aber keien Reaktion in meinem Editor :-(

    p.s. wordpress ist in dem wordpress unterordner isntalliert aber die letzte version solte das ja unterstuetzen.

    was fuer .js files werden/sollten denn im editor geladen werden?

    wie kann ich das Problem weiter debuggen?

  66. naden sagt:

    @ovidiu seit das in WordPress 2.8 integriert wurde habe ich das Plugin nicht mehr geupdatet. Das die Funktion wieder entfernt wurde wusste ich nicht.

    Das Plugin hängt sich via Javascript an die beiden Form Id’s template und newcontent. Wenn sich deren Name geändert hat, dann funktioniert es nicht mehr.

    Versuch es mal damit, ich werde dass bald auch mal updaten.

  67. ovidiu sagt:

    danke. newcontent heisst immer noch newcontent. klappt bei mir trotzdem nicht. waere sehr dankbar wenn du das Plugin mal fuer 2.8.4 ueberpruefst und eventuell updatest.

    andere Frage, warum hast du denn keinen Feed fuer die Kommentare hier? Denn eine subscribe Funktion finde ich auch nicht :-(

  68. naden sagt:

    @ovidiu ich habe das Plugin unter WordPress 2.8.4 getestet. Es lief ohne Probleme.

    Die Kommentare kannst du wie bei jedem WordPress Blog mit aktiven Permalinks über die folgende Url bekommen: http://domain.tld/PATH_TO_WORDPRESS/comments/feed

    Ich habe deine Frage aber mal zum Anlass genommen, die Kommentar-Feed Url in den Header einzubauen ;)

  69. ovidiu sagt:

    hatte den von dir angegebenen Pfad fuer comment feeds natuerlich ausprobiert… ging aber nicht entweder hab ich mich vertippt oder ka.

    hab den Fehler mit dem Plugin auch schon gefunden: luat logfile war die Suche nach .htaccess im Plugin Ordner erfolglos. Hab eine leere erstellt und alles ist nun gut :-)

  70. Alex sagt:

    Vielen Dank für das tolle Plugin.

    Leider funktioniert es bei mir im Chrome nicht, im IE8 funktioniert es wunderbar.

  71. naden sagt:

    @alex, als ich das Plugin geschrieben hatte, gab es Chrome noch nicht ;) Ich werde bei Gelegenheit mal reinschauen.

  72. Tristan sagt:

    This plugin does NOT work in Safari 4.0. I cannot edit the code when the plug-in is turned on, When I deactivate it, I can edit the code. Works fine in Firefox 3.5.

  73. Olli sagt:

    Super, so ein Plugin habe ich schon länger gesucht. Und zum Thema Chrome: Wer nutzt den schon…

  74. Cooles Plugin, leider kommt Codepress mit dem fiesen Spaghetti-Code etlicher Themes manchmal nicht ganz so gut klar. BTW: läuft bei mir mit WP 3.0.1

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>