Facebook Button Twitter Button YouTube Button RSS Button

IT-Runde

Schlichter, kleiner und einfacher WYSIWYG-Editor

  • Schlichter, kleiner und einfacher WYSIWYG-Editor

    WYSIWYG ist eine Abkürzung und bedeutet eigentlich ausgeschrieben „What You See Is What You Get“. Ins deusche übersetzt dann soviel wie „Was du siehst, ist was du bekommst“. Beschreiben tut ein WYSIWYG-Editor eigentlich nur ein Editor, wo man während der Bearbeitung genau das sieht, was man nachher speichert oder druckt. Ein bekanntes Beispiel ist hier natürlich Microsoft Word! ;). Als Programmierer braucht man vor allem bei Nutzereingaben öfter mal WYSIWYG-Editoren in den eigenen Scripten, damit diese ihren Text sofort schon bei der Eingabe formatieren können – Doch die Auswahl ist sehr groß und für kleine Projekte ist nicht immer genau der passende Editor dabei. Schaut man sich bei Wikipedia eine Liste der HTML-Editoren an, wird man schnell feststellen, dass es für große Projekte sehr gute und umfangreiche WYSIWYG-Editoren kostenlos gibt, die man aber nicht in kleinen und schlichten Projekten einsetzen kann, da sie viel zu Mächtig und unflexibel sind (Beispiel: „TinyMCE“ und „CKEditor„).

    Kleiner aber feiner Editor

    Ich persönlich musste für ein internes Projekt auch einen kleinen aber guten Editor suchen und kam nach langer Suche auf TinyEditor. Schon die Demo hatte mich vor allem von der Einfachheit überzeugt und mit gerade einmal 35 KB ist das Script wirklich klein. Nachdem ich den Editor runtergeladen hatte, fande ich vor allem den Quelltext sehr übersichtlich. Man braucht nicht lange suchen um verschiedene eigene Einstellungen im Code vorzunehmen und auch das Einfügen von eigenen Icons und Funktionen sowie das entfernen von vorhandenen ist ganz schnell passiert.

    Als Beispiel zeige ich euch mal den Editor, welchen ich in mein internes Projekt eingebaut habe:




    Wie ihr seht, habe ich alle überflüssigen Funktionen- (Je nach Projekt kann man ja andere Funktionen gut brauchen) und auch die Source-Anzeige unterhalb des Editors entfernt. Somit kommen die Nutzer erst gar nicht dadrauf im erzeugten Quelltext rumzuklicken und wohlmöglich ausversehen Fehler einzubauen ;).

    Lösung zum Fehler: Übergabe von Daten

    Wie bei einem Formular o.ä. üblich will ich natürlich auch die Daten vom Editor schnell und einfach in die Datenbank bekommen. Gerade hier habe ich so einige Zeit investieren müssen, damit der Quellcode von der textarea an die Datenbank übergeben wurde. Lange habe ich bei Google suchen müssen – Ohne Ergebnis!. Als ich dann beim Programmierer persönlich eine Anleitung gesucht habe, suchte ich leider auch vergeblich. Fast schon wollte ich mich im Support-Forum anmelden, als ich dann das Thema „can’t get content of my textarea“ fand. In diesem wurde dann beschreiben, dass man in das form-Tag des Formulares das Attribut „onsubmit=’editor.post();'“ setzen muss – Und da soll man ohne Anleitung drauf kommen? 😉

    1
    
    <form name="itrunde" action="index.php" onsubmit='editor.post();' method="post">

    Danach klappte die Übergabe des Quelltextes in die Datenbank super und ich konnte var_dump endlich wieder von der Seite verbannen Also ein sehr nützlicher Tipp, falls ihr auch den TinyEditor benutzten wollt und euch stundenlange Suche sparen wollt! 😀

    Welchen Editor nutzt ihr bisher zum Einbinden in euren Scripten? Ein selbst geschriebenes, ein völlig überladenes oder etwas ähnliches wie den TinyEditor?

  • Kostenlose IT-Tipps

    • Nebenbei ein Online Business aufbauen
    • Passiv Geld generieren
    • Online Trends (Nischenseiten, SEO, Google & Co.)

     
     


  1. #1 Francesco
    08.01.2011 um 15:25 Uhr

    Die IT-Runde hat es echt drauf, ich suche schon ewig nach einem passenden WYSIWYG Editor der zu meinen kleinen Scripten passt! Und genau nach so einem habe ich gesucht, die Funktionen klappen super, ich bekomm es dank deinem Tipp eingebunden und der sieht auch noch richtig professionell aus. Das ist echt genial, danke! 😀

    (Auch über Google findet man den Editor fast niergendwo, ich weiß nicht wie du den überhaupt gefunden hast, finde ich klasse :P)

    Post ReplyPost Reply
  2. #2 Pascal
    09.01.2011 um 13:44 Uhr

    Ich konnte mich noch nie wirklich auf die WYSIWYG-Editoren verlassen. Nicht mal bei kleinen Dingen, nie hat alles live ausgesehen wie im Editor. Aber ich hätte natürlich nnichts dagegen wenn hier ein Guter auftauchen sollte.

    Post ReplyPost Reply
  3. #3 Flo
    14.01.2011 um 15:36 Uhr

    Und wie überprüfst du den Quelltext, den der WYSIWYG-Editor ausgibt. Wenn man böse ist kann man ja da irgendwas einfügen. Deswegen hab ich den im Einsatz ohne WYSIWYG -Funktion im Einsatz: http://code.google.com/p/jquery-bbedit/ Sonst gibts ja nichts, was nur den BB-Code übergibt.

    Post ReplyPost Reply
  4. #4 Günter
    20.01.2011 um 14:56 Uhr

    Das einbinden klappt super, aber ich krieg die Daten einfach nicht in meine DB.
    Könnt ihr mir helfen???
    Was auch komisch ist dass der Editor keinen submit button hat, wie soll die Daten an die DB übergeben??

    Post ReplyPost Reply
  5. #5 Christian
    20.01.2011 um 19:02 Uhr

    @Günter: Schau dir mal die Lösung vom Problem im Artikel an, hatte ja das selbe Problem ;). Einfach in das Form-Tag das Attribut onsubmit=’editor.post();‘ einsetzen und schon sollten die Daten übergeben werden. Der Submit-Button braucht übrigens auch gar nicht dabei zu sein, ist ja noch kein Formular sondern nur der Editor. Den kannst du ja wie bei jedem anderen Formular mit

    1
    
    <input type="submit" value="Submit" />

    einbetten ;). Viel Spaß mit dem Editor!

    Post ReplyPost Reply
Kommentar schreiben