| Tweet |
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?
Tweet







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
)
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.
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.
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??
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
einbetten
. Viel Spaß mit dem Editor!
21.01.2011 um 08:30 Uhr
Hallo Christian,
Danke für deine schnelle Antwort.
Das Attribut mit onsubmit steht bei mir schon drin.
Ich denke dann wird es an meinem php Script liegen welches die Daten in die DB eintragen soll.
Hast du mir ein script das funktioniert??
21.01.2011 um 23:53 Uhr
Wieso benutzt du denn ein fertiges Script? Du übergibst die Daten per POST und kannst sie dann auf der Übergabe-Seite abfragen ob sie ausgefüllt sind:
Wenn alle Daten vorhanden sind, schickst du sie per SQL Abfrage an die Datenbank und schon sind sie eingetragen
11.03.2011 um 15:08 Uhr
Hallo Christian,
ich habe den TinyEditor in meine Seite eingebettet und ich sehe auch alles. In welcher Variablen ist nun der generierte Quelltext gespeichert? Wie kann ich diesen auslesen um ihn in meine Datenbank zu schreiben?
Vielen Dank für einen Tipp!!
Gruß,
Andreas
11.03.2011 um 18:26 Uhr
Ganz einfach, du übergibst den Inhalt des Editors ja mit POST zur nächsten Seite, musst den Inhalt also nur noch in eine Variable schreiben und dann z.B. in eine Tabelle schreiben
. Hier ein Beispiel-Schnipsel:
26.06.2011 um 19:57 Uhr
Klasse! Genau son Ding habe ich gesucht…
Vielen Dank!
06.12.2011 um 09:49 Uhr
Hallo Christian,
der Editor ist echt klasse. Danke für den Artikel.
Allerdings habe ich größte Schwierigkeiten, den Inhalt der Textarea in die POST Variable zu bekommen. Ohne Editor ist alles kein Problem, mit Editor werden aber einfach keine Daten übergeben (an onsubmit=’editor.post();’ habe ich natürlich gedacht).
Könntest du mir vielleicht ein funktionierendes Beispiel per Mail senden? In der Auswertungsdatei reicht mir eine einfache Ausgabe der POST-Variable.
Vielen Dank im Voraus.
Viele Grüße
Jay
02.01.2012 um 01:45 Uhr
Also ich weiss nicht, wie du das gemacht hast, aber bei mir geht überhaupt nichts. Egal ob das zeuch nun drinn steht bei dem Tag oder nicht.
http://nopaste.info/a1222e382a.html
Und mich kackt das ganze langsam an, ich habe nun schon 3 versch. WYSIWYG Editor ausprobiert, aber mit keinem einzigen ging es. :-/
Aber komischerweise bei einer Seite funktioniert es wunderbar, aber bei den anderen überhaupt nicht. Und es gibt dabei keine Unterschiede. :-/
02.01.2012 um 17:49 Uhr
Versuche mal den Wert nicht über id sondern über den namen zu übergeben, also quasi so:
Und die Variable annehmen mit $_POST["inhalt"].
02.01.2012 um 20:16 Uhr
funktioniert auch nicht, hab ich alles auch schon versucht…
er übergibt einfach die Daten nicht.. :-/
ich weiss nicht woran das liegt, weil wie gesagt beim Contact-Formular funktioniert es wunderbar, aber sobald er daten in die DB eintragen muss nicht mehr..
20.05.2012 um 21:17 Uhr
Hey leute ich hab da nen kleines Problem mit dem Editor …
ich änder die größe in der breite alles kein thema doch durch den editor verschiebt sich mein layout von der hp …
20.05.2012 um 23:36 Uhr
Hi Dennis,
habe mal soeben zufällig die Seite auf deiner Webseite gefunden: http://kidzworld.eu/kontakt.html
!
Meinst du das fieldset, welches rechts nicht mehr zu sehen ist? Das sind reine Einstellungen in CSS bei deinem Layout, hat nicht viel mit dem Editor zutun (Könntest dort auch ein langes Textarea einbauen, und es würde genau so verschoben werden)
29.07.2012 um 14:17 Uhr
Hi, kann mir einer von euch beantworten, in welcher Datei und wo ich einzelne Funktionen des Editors rausnehmen kann? z. B. nehmen wir mal an ich will die Funktion entfernen, mit welcher man Links erzeugen kann.
Danke für eure Hilfe im voraus!
MfG
Kevin
30.07.2012 um 13:00 Uhr
Die Funktion sieht folgendermaßen aus und heißt “controls”:
03.08.2012 um 20:16 Uhr
Hallo,
ich nutze den Editor um in meinem Portal Nachrichten zwischen den Usern hin und her zu schicken und diese ein bisschen zu formatieren. Ich bin mir nicht sicher, ob dieser Editor dafür überhaupt geeignet ist!!
Nun habe ich das Problem, wenn jemand ein @-Zeichen und ein “-Zeichen eingibt, dass es eine Syntax-Fehlermeldung von MySQL gibt.
Gibt es dafür eine Lösung?
Ich hoffe, ich konnte mich verständlich ausdrücken.
Lg,
Andreas
30.01.2013 um 13:21 Uhr
Hallo,
auch ich habe das Problem, das der übergebene Inhalt der textarea nicht ankommt.
Ich hoffe, dass mir jemand helfen kann.
Besten Dank schonmal.
Gruß Markus
anbei meine kleine php-Datei
Dateiname
sprechend ohne Leerzeichen,Umlaute,Sonderzeichen)
Text:
var editor = new TINY.editor.edit(‘editor’, {
id: ‘tinyeditor’,
width: 584,
height: 175,
cssclass: ‘tinyeditor’,
controlclass: ‘tinyeditor-control’,
rowclass: ‘tinyeditor-header’,
dividerclass: ‘tinyeditor-divider’,
controls: ['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|',
'orderedlist', 'unorderedlist', '|', 'outdent', 'indent', '|', 'leftalign',
'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n',
'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'print'],
footer: true,
fonts: ['Verdana','Arial','Georgia','Trebuchet MS'],
xhtml: true,
cssfile: ‘custom.css’,
bodyid: ‘editor’,
footerclass: ‘tinyeditor-footer’,
toggle: {text: ‘source’, activetext: ‘wysiwyg’, cssclass: ‘toggle’},
resize: {cssclass: ‘resize’}
});
30.01.2013 um 13:36 Uhr
Nochmals Hallo,
da wurde wohl bei meinem Eintrag etwas abgeschnitten.
Hier steht nun mein Coding, welches leider nicht funktioniert, da in der Zieldatei beim Befehl $comment = $_POST["editor"]; leider nichts ankommt.
http://www.trockel-online.de/testtiny.php