404

Design made in Germany

Deutsches Design

How to: JavaScript WYSIWYG-Editoren


Design Magazin Design Agenturen Designer Design Weblogs Design Magazine Design Portale Design Communities Design Hochschulen Design Organisationen Design Ressourcen Design Shops Grafikdesigner Schriftdesigner Webdesigner Interfacedesigner Flashdesigner Motiondesigner Sounddesigner Fotodesigner 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

hallo leute,

nach min. einer stunde suchen und der tatsache, dass ich einfach keine antwort auf meine frage finde, komm ich nun bei euch angedackelt.

hat jmd. von euch eine ahnung, wie web-basierte wysiwig editoren ala fckeditor oder tiny mce funktionieren? das dies nur mit javascript funktioniert ist mir klar und auch wie man per js text in ein textfeld einfügen kann ... aber die große frage wäre, wie wird der text im textfeld auch direkt in der gewählten formatierung (fett, kursiv, etc.) dargestellt und wie werden bilder, etc. in dem textfeld platziert and formatiert?

gibt es dazu vielleicht ein simples beispiel, ohne das man sich durch den kompletten code der editoren wälzen muss?


hier die links zu den besagten editoren ...

fckeditor:
http://www.fckeditor.net/demo/default.html

tinymce:
http://tinymce.moxiecode.com/example_full.php?example=true


Deutsches Design: How to: JavaScript WYSIWYG-Editoren

öhm? HTML? :)

das was du (zumindest im tinyMCE) vor dir hast ist mE nen iframe mit stinknormalem HTMLcode drin, einzig besondere, zu kannst "drin rum klicken" .. also der erstellt halt ganz normalen HTMLcode, der halt nur bearbeitet werden kann.. meine Javascriptfähigkeiten reichen leider nicht aus, um da mehr drüber sagen zu können, aber es ist ganz normales HTML (bzw CSS....).


Wie du selber schon sagst kann man per JS Text in eine Textfeld machen. Es macht keinen Unterschied ob du nur Text dort reinmachst oder mit CSS formatierten Text. Mit CSS kannst du den Text dann so anzeigen, wie er später einmal aussehen soll.


1. Dem Iframe die id "wysiwyg" zuweisen.
2. Die Eigenschaft designMode setzen:
wysiwyg.document.designMode = "On";

3. Elemente mit "execcommand" Formatieren:
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/execcommand.asp

Beispiel für onClick:
wysiwyg.document.execCommand('bold', false, null)

Das ist das Grundprinzip!


das ist echt n guter tipp. DANKE! ihr habt natürlich recht. in nem iframe könnte man den text formatiert anzeigen und "unsichtbar" mit code gleichzeitig in ein textfeld schreiben lassen.

das execCommand is allerdings nich optimal. ich such da mal nach was, das auch im firefox, etc. funktioniert. geht bei den wysiwyg-dingern ja auch irgendwie.

schönes wochenende wünsch ich erstmal :)


Das ist aber ne sehr proprietäre Anleitung, Herr Stuhlmann. Moderne WYSIWIG-Editoren funktionieren nämlich auch mit Firefox.
Javascript, DOM und Eventhandler reichen da durchaus aus.


@ Herr Jung:
So war's auch gemeint. Für Cross-Browser-Umsetzungen reicht es allerdings nicht aus, nur zu wissen, wie man Text per JS in ein Textfeld schreibt. O.g. Variante bringt nach 5 Minuten schon den ersten IE-seitigen Erfolg. Dann muss man sich zum Verständnis eben doch mal einen Beispiel-Code reinziehen!


Das ist durchaus richtig, löst aber nicht das Problem an sich. Man kann einem ja auch nicht mit Access wirkliche Relationale Datenbanken erklären/Programmieren lassen. Ganz zu schweigen von optimierten und ressourcensparenden SQL-Abfragen...
"designmode" ist eben nicht die Technik an sich sondern die Microsoft eigene Interpretation des ganzen. Nicht dass das bei Microsoft häufiger vorkommt ;)


Seitentitel: How to: JavaScript WYSIWYG-Editoren