Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
  • CMS
Dieter Petereit 23. Dezember 2008

Markup-Editoren für jede Textarea

Kein Beitragsbild

Schon der Titel macht wohl deutlich, dass dieser Beitrag nicht gerade einer der Kategorie „general interest“ ist. Dafür werden sich diejenigen, die sich dafür interessieren, umso mehr freuen. Um doch noch eine Spur „general interest“ rein zu bringen, stelle ich ein zum Thema gehöriges WP-Plugin vor. Diejenigen Webentwickler unter Ihnen, die auf der Suche nach einem benutzbaren und idiotensicheren clickable Code-Editoren für ihre Auftraggeber sind, lesen bitte weiter. Im Folgenden stellen wir Ihnen den eigenständigen Newcomer „SmartMarkUp“ von PHPcow, sowie den schon länger am Markt befindlichen jQuery-Aufsatz markItUp! vor.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

Markup-Editoren: Problemstellung

Sie realisieren ein Projekt für einen Kunden, in welchem Sie auch eine Art Mini-Redaktionssystem verwirklichen sollen. Kleinere Texte sollen durch Mitarbeiter des Auftraggebers online gestellt werden können. Natürlich verwenden Sie Textarea als Element der Wahl. So können die Mitarbeiter Texte erfassen. Aber: Wie sollen sie diese Texte formatieren? HTML-Code ist zwar möglich und würde auch interpretiert. Nur leider ist von den Mitarbeitern keiner auch nur im Ansatz HTML-kundig. Ein Editor muss her, mit dessen Hilfe über einfache Buttons Formatierungen in den Text eingesetzt werden können. Dabei soll der Editor aber nicht irgendwelchen Code produzieren, wie es bei diversen bekannten Editoren gang und gäbe ist. Vielmehr legen Sie Wert auf validen Code, sowie darauf, dass nur bestimmte Tags verwendet werden können.

Anzeige

Genau dafür eignen sich die beiden Javascript-Bibliotheken SmartMarkUp und markItUp!. Natürlich richten sich die Bibliotheken auch an die Teams der CMS-Entwickler. Schließlich muss man nicht aus purer Eitelkeit jede Aufgabe selber lösen oder ständig das Rad neu erfinden.

SmartMarkUp (SMU) von PHPCow

Die Besonderheit an SMU ist, dass es sich um eine völlig eigenständige Lösung handelt. Sie ist weder fest an ein Javascript-Framework gebunden, noch benötigt sie weitere Funktionalitäten neben denen, die sie selbst mitbringt. SMU kann daher ohne Framework oder aber mit jedem beliebigen Framework, sei es jQuery, Mootools, Prototype oder welches auch immer verwendet werden. Eine weitergehende Integration in jQuery ist vorbereitet, aber grundsätzlich nicht erforderlich.

smu-conf-js.png

SMU wird mit Konfigurationen für HTML, CSS und BBCode geliefert. Eigene Konfigurationen können in einfach zu schreibenden „conf.js“ schnell selbst angelegt werden. SMU ist skinnable und kann von daher nahtlos in bestehende Designs eingebaut werden. Die Bindung an die jeweilige Textarea erfolgt in wenigen Schritten, welche die Entwickler, wie auch die sonstigen Installations-, Konfigurations- und Erweiterungsmöglichkeiten, ausführlich dokumentiert haben.  SMU ist aufgrund einer strukturierten API einfach zu erweitern und zu kontrollieren. Add-Ons in Form eines Farbwählers, eines Sonderzeichen-Tabletts, sowie eines Suchen-Ersetzen-Dialogs werden mitgeliefert, eigene sollen mit wenig Aufwand erstellt werden können.

SMU ist eine moderne Lösung auf dem Stand der Technik. Es spräche im Grunde wenig für ihren Einsatz, wenn es nicht den Konkurrenten markItUp! gäbe. SMU ist aber in jedem Falle die Lösung der Wahl, wenn Sie in Ihrem Projekt nicht mit jQuery arbeiten können oder wollen. Es gibt derzeit keine weitere völlig eigenständige Lösung, die ohne jegliches Framework auskommen würde. Gehören Sie zu den Entwicklern, die ohnehin auf jQuery setzen oder künftig setzen wollen oder jederzeit ein beliebiges Framework integrieren können, empfehle ich Ihnen den Einsatz der „markItUp!“-Bibliothek.

markItUp! (mIU) von Jay Salvat

Würde PHPCow nicht ohnehin selber einräumen, dass man sich von „Jay Salvat“ inspirieren ließ, man würde es auch selber sehr schnell merken. Tatsächlich wirkt SMU wie eine schwächere Kopie. Mit zwei Unterschieden pro und kontra SMU:

  1. Pro: SMU ist nicht von jQuery abhängig, steht also auch Jüngern anderer Frameworks zur Verfügung.
  2. Kontra: mIU verfügt über eine Vielzahl downloadbarer Addons und Sprachimplementationen.

mIU kann bereits eine ansehnliche Zahl von Referenzverwendern benennen, darunter das bekannte CMS Redaxo, wie auch das weniger bekannte TangoCMS. Funktional gilt für mIU, was bereits zu SMU gesagt wurde. Auch mIU ist mit zwei Codezeilen zu integrieren, es ist leicht zu erweitern und es kann an das jeweilige Seitendesign angepasst werden. Hinsichtlich des Datengewichts tun sich SMU und mIU nur wenig. Beide bewegen sich unterhalb von 10 kb pro Konfiguration.

plugins-miu.png

Aufgrund seiner Einbindung in jQuery ist es überdies möglich, weitere jQuery-Funktionalitäten auch für den Editor nutzbar zu machen, so dass mIU insgesamt das deutlich mächtigere Werkzeug ergibt. So ist es beispielsweise möglich, mIU von jeder beliebigen Position in der Website aus anzusprechen sowie sonstige Features, wie Galleries, Dropdowns etc. einzubinden.

miu-html-set-example.png

Für den Entwickler und/oder Blogger auf der Basis gängiger CMS entfaltet mIU einen besonderen Charme, da es von engagierten Community-Teilnehmern in Plugin-Form gegossen wurde. Unter anderem für Drupal und WordPress, Habari und Textpattern stehen funktionsfähige Plugins bereit. In WP ersetzt mIU die eher schmalbrüstige Tab-Leiste, die die WP-Entwickler der Textarea mitgegeben haben und die nicht einmal für die gängigsten Befehle gerüstet ist.

wp-standard.png

Wer sich also – nicht zu unrecht – über die Qualität des Wysiwyg-Codes beschwert und deshalb bislang HTML per Hand setzt, sollte sich das mIU-Plugin einmal näher ansehen. Produktivitätssteigerung ist garantiert. Um die Installation des jQuery-Frameworks muss man sich übrigens nicht kümmern. Dieses wird mit dem Plugin automatisch installiert.

wp-markitup.png

Executive Summary

  • jQuery ohnehin im Einsatz oder kein Problem, es einzusetzen? => markItUp!
  • Frameworks sollen oder können nicht eingesetzt werden oder sind nicht jQuery? => SmartMarkUp ™

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

12 Kommentare

  1. TinyMCE war bisher mein Favorit.
    Jedoch ist dieser sehr lahm was die Ladezeit angeht.

    Ich werde mir alles nochmal genau durchlesen und dann auch vielleicht zu anwenden!

  2. @W.Wagner
    Welcher Editor auch immer: ich habe mir fast alle angesehen. Für TYPO3 und auch für Magento. Der erzeugte Code lässt sehr zu wünschen übrig. Und leider macht auch TinyMCE das Backend sehr langsam :(

  3. @karlotta: RichText-Editoren fürs Web sind vereinfacht gesagt auf Textarea-Elemente aufgeflanscht. Wie nun der Zugang zu diesem Element ist, ist unabhängig vom Editor. Wenn weiterhin Erklärungsbedarf besteht, am besten einen Artikelvorschlag senden: http://www.drweb.de/scripts2/kontakt/index.php/form/

  4. ich bin auch eher amateur und frage mich, ob diese editoren nur innerhalb eines cms verwendet werden können oder ob auch bereiche einer einfachen html-website damit von dem besitzer geändert werden können. ich habe keine idee, wie das funktionieren sollte. eine passwortgeschützte parallel-seite bauen, wo die veränderten texte dann an die betreffende seite geschickt werden? kann das funktionieren?
    wäre hocherfreut über sachdienliche hinweise !!

  5. Ich nutze zur Zeit auch TinyMCE für diverse Projekte, werde mir aber mIU im Zuge eine jQuery-fizierung mal anschauen. Danke für den Tip.

  6. Interessant und bewährt hat sich bei meinen Kunden der WYMEditor, http://www.wymeditor.org/. Die neueste Version vom November lässt sich auch wieder gut und recht einfach konfigurieren und verwendet auch jquery.

  7. @braun

    wenn du „kein vollprofi“ bist und joomla 1.5 benutzt, hast du m.e. keine probleme – es gibt editoren in jeder ausprägung für joomla.
    es gibt aber noch kleinere cms ohne editoren – für die ist das schon interessant.
    solltest du aber in wirklichkeit doch ein profi sein, könntest du ein joomla-plugin schreiben – dann hätt´s wieder was mit dir zu tun. und mit mir, weil ich´s mir runterladen würde :-)

  8. YUI bietet auch einen Rich Text Editor – vor ein paar Monaten habe ich damit vor allem sehr schnell Fehler produzieren können, hat jemand Erfahrung mit der aktuellen Version?

  9. Aber http://www.codepress.org scheint offline zu sein, Hannes?!?

  10. Leider richtet sich der Artikel nur an Vollprofis. Ich verwende für meine Seite Joomla 1.5. Hat der Artikel was mit mir zu tun? Bzw. Kann ich die Programme für meine Nebenautoren verwenden?
    Grüße

  11. Hi,

    interessante Sache, werde ich mir mal anschauen.
    Aber ob die zwei meinen bisherigen Favoriten TinyMCE ersetzen können, muss sich dann erst noch zeigen.

Schreibe einen Kommentar

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