Hi

ich stelle fest das es keinen WYSIWYG-Editor gibt, der vernünftig funktioniert. Alle machen Code-Schlamassel. Hundert mal der gleiche Tag, dann ein bissl Text, und dann wird der Tag hundert mal geschlossen. Bekloppt.

Erstmal: Wie arbeitet so ein Editor eigentlich? Hat hier jemand einen Plan davon wie die "ticken"?

So stell ich es mir vereinfacht vor: Es ist keine Textarea. Klickt man irgendwo hin, wird im onclick event geguckt auf welches element geklickt wurde. Die eigentliche "Textarea" ist nur ein DIV dessen Inhalt per innerHTML ständig modifiziert wird. Das DIV enthält einfach nur HTML-Code. Ganz einfach.

Wird nun auf eine Stelle im Text geklickt, klickt man in Wirklichkeit auf ein HTML-Element.
Frage: Wie stelle ich fest, an welche Stelle des Textes geklickt wurde Ich kann vllt. abfragen das ich auf einen Link geklickt habe oder auf ein <b>-Tag, aber genau auf welches Zeichen... also die aller kleinste Einheit in HTML: Das einzelne Zeichen. Darum dreht sich die Wurst.

Was fällt Euch dazu ein? Erstmal muss man es schaffen das man einen simplen nicht-formatierten Text eintippen kann, und zwar *nicht* mit einer Textarea sondern komplett javascript-only und ein pseudo-eingabefeld das in Wirklichkeit ein DIV ist.

Gruß
Laura

Hi,

Erstmal: Wie arbeitet so ein Editor eigentlich? Hat hier jemand einen Plan davon wie die "ticken"?

Hast Du Dir schon mal einen davon angeschaut (tinyMCE, FCKEditor)?

[...]und zwar *nicht* mit einer Textarea sondern komplett javascript-only und ein pseudo-eingabefeld das in Wirklichkeit ein DIV ist.

Wie stellst Du Dir das denn vor? Einen onkeydown-Handler schreiben, der bei jedem Tastendruck ein Zeichen in das Divs schreibt (falls es in dem Div war)? Was hast Du gegen eine Textarea einzuwenden?

LG

Was hast Du gegen eine Textarea einzuwenden?

nach meinem Verständnis kann man einer Textarea zwar Styles für die Schrift verpassen, aber die gelten dann für alles. Verschiedene Formatierungen in einer Textarea = niente, impossible, nada, null, nicht mögli.

Oder

Also es geht darum das man die Schrift so sieht, wie sie später aussieht. In dem Editor hier kann man ja auch den Text formatieren, aber ist nicht WYSIWYG...

Gruß
Laura

Hi,

nach meinem Verständnis kann man einer Textarea zwar Styles für die Schrift verpassen, aber die gelten dann für alles. Verschiedene Formatierungen in einer Textarea = niente, impossible, nada, null, nicht mögli.

Dann schau Dir mal tinyMCE an.

In dem Editor hier kann man ja auch den Text formatieren, aber ist nicht WYSIWYG...

Das ist ja auch BBCode und damit ein völlig anderes Brett.

LG

Hi

willst Du damit sagen, das tinyMCE eine Textarea mit verschiedenen Styles für die Inhalte ausstatten kann? hätte 1 Mio drauf gewettet das das impossible ist...? Oder ist das nur ein Trick?

Gruß
Laura

Zitat von kuddeldaddeldu

Wie stellst Du Dir das denn vor? Einen onkeydown-Handler schreiben, der bei jedem Tastendruck ein Zeichen in das Divs schreibt (falls es in dem Div war)?

So weit muss man nicht mal gehen. Beim Internet Explorer reicht es, die Eigenschaft contentEditable auf true zu setzen. Alternativ kann man das gesamte Dokument editierbar machen, indem man document.designMode auf 'on' stellt. Dann klappt's auch mit Firefox & Co.

Zitat von kuddeldaddeldu

Dann schau Dir mal tinyMCE an.

Die Textarea bei TinyMCE ist nur ein Fallback. Der WYSIWYG-Editor ist über ein inline frame realisiert, dessen document editierbar gemacht wurde.

Grüße,
Matthias

interessant... wie lange gibts sowas schon, und warum spricht sich das nicht rum? habe ja einige JavaScript-Bücher, aber keines davon erwähnts auch nur ansatzweise.

Code :

1	document.designMode = "on";

bewirkt in meinen Browsern aber net viel... werd mir mal den tinyMCE angucken....

Gruß
Laura

Zitat von DataFox

interessant... wie lange gibts sowas schon, und warum spricht sich das nicht rum?

Scheint sich ja rumgesprochen zu haben, da alle WYSIWYG-Editoren, die mehr als einen Browser unterstützen, darauf aufbauen.

Zitat von DataFox

habe ja einige JavaScript-Bücher, aber keines davon erwähnts auch nur ansatzweise.

Vermutlich weil dies noch nicht „offiziell“ (also vom W3C) standardisiert wurde. Zwar gibt es einen Absatz über designMode im HTML-5-Draft, aber wie der Name schon sagt, handelt es sich dabei um keine endgültige Version, sondern eben nur um einen Entwurf. Die momentane Unterstützung von designMode ist also eher eine Konvention, an die sich aber keine halten muss (gut, das sind die W3C-Recommendations auch nicht, aber ihr wisst schon ).

Zitat von DataFox

Code :

1	document.designMode = "on";

bewirkt in meinen Browsern aber net viel... werd mir mal den tinyMCE angucken....

Folgendes funktioniert (= das ganze Dokument wird editierbar) bei mir mit Firefox 2 und Safari 3, mit dem IE 6 dagegen nicht:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

<head>
  <title>Design Mode</title>
</head>

<body>
  <p>
    <button onclick="document.designMode='on';">designMode on</button>
  </p>
  <p>Editier mich!</p>
</body>

</html>

Benutzt man einen iframe, dann spielt zusätzlich auch der IE 6 mit:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

<head>
  <title>Design Mode</title>
</head>

<body>
  <p>
    <button onclick="document.getElementById('editor').contentWindow.document.designMode='on';">designMode on</button>
    <button onclick="document.getElementById('editor').contentWindow.document.designMode='off';">designMode off</button>
  </p>
  <iframe id="editor"></iframe>
</body>

</html>

Andere Browser hatte ich grad nicht zum Testen da. Allerdings gehe ich davon aus, dass der IE 7 hier abwärtskompatibel ist. Opera müsste man ausprobieren.

Grüße,
Matthias

Hi,

ah ja, ich hatte irgendwie nur noch contentEditable im Kopf...
Ich frage mich allerdings immer noch, was Du (Laura) Dir jetzt eigentlich vorgestellt hast. Nehmen wir mal an, das ganze Dokument ist editierbar. Du klickst irgendwo hin (nehmen wir weiter an, Du erkennst, wo geklickt wurde). Und dann? Dann willst Du Buttons, mit denen Du das, was Du tippst oder markierst, formatieren kannst. Die müssten dann ja wieder HTML-Code generieren, genauso, wie es bei den bestehenden schon passiert. Worin soll der Unterschied bestehen? Wie willst Du Codesalat vermeiden?

LG

PS.: Bei einem dieser Editoren habe ich glaube ich mal so eine Art "Cleaner" gesehen, der überschüssige HTML-Tags entfernt, bin mir aber nicht sicher, da ich die Dinger selbst nicht benutze...

Zitat von DataFox

Frage: Wie stelle ich fest, an welche Stelle des Textes geklickt wurde Ich kann vllt. abfragen das ich auf einen Link geklickt habe oder auf ein <b>-Tag, aber genau auf welches Zeichen... also die aller kleinste Einheit in HTML: Das einzelne Zeichen. Darum dreht sich die Wurst.

Die Wurst nennt sich "TextRange"...Google dürfte dazu mehr ausspucken, als dir lieb ist

Interessant!

Also der TinyMCE scheint ja wirklich ein abartig komplexes Ding zu sein, da wird einem schwindelig wenn man an den Entwicklungsaufwand denkt Das muss ja unzählige Entwickler-Jahre gekostet haben.

Aber ich muss auch zugeben der TinyMCE ist durchaus praxistauglich, denn man kann mit einem Brush den Spaghetti-Code aufräumen. Jetzt muss nur noch jemand so schlau sein und die Funktion dieses Brushes automatisch ausführen wenn man das Formular submittet.

Mein Ansatz wäre gewesen das der Code auf 2 Ebenen verwaltet wird: Einmal im Rohformat; Jedes Zeichen ein Objekt vom Datentyp Editor-Content (selbst gebastelter Datentyp), welcher entsprechende Style-Eigenschaften besitzt. So kann ein Element eine Style-Eigenschaft nur einmal haben, nicht x-fach. Es wird also im Zweifelsfall immer die Style-Eigenschaft des markierten Objektes verändert. Daraus entsteht für den Wisywyg ein riesiger Spaghetti-Code, denn jedes Zeichen steht in einem eigenen SPAN-Tag mit Style-Angaben. Is ja nur für den Editor.

Im zweiten Schritt geht ein Parser durch und setzt alle Objekteigenschaften auf NULL, die im vorangegangenen Objekt definiert waren (dazu muss das vorangegeangene natürlich gecached werden). Im dritten Schritt erhalten dann nur noch diejenigen Objekte ein öffnendes SPAN-Tag mit Style-Angaben vorangestellt, welche selbst Style-Eigenschaften != NULL besitzen. Beim ersten wieder vorkommenden Objekt mit Style-Eigenschaften != NULL wird VOR dem Objekt das SPAN-Tag geschlossen und ein neues auf gemacht, mit den entsprechenden Style-Eigenschaften dieses Objektes. Und immer so weiter. Das Ergebnis: Der Code sieht so aus, wie er aussehen soll, nichts wird hundertfach verschachtelt.

Das *sollte* funktionieren Aber TinyMCE macht mir Angst. Das Ding ist nahezu perfekt! Allerdings brauche ich auch wirklich nur:

- B / I / K Formatierung
- Liste
- Link
- CODE einfügen
- H1 - H7 (Überschriften)
- ENTER = P; Absatz
- ENTER + SHIFT = BR; Zeilenumbruch
- Wiederherstellen / Rückgängig

TinyMCE kann ja fast so viel wie Word. Der Name täuscht

Für's Web finde ich es aber fatal in einem WYSIWYG so kram wie Schriftarten, Schriftgröße usw. anzubieten. Das geht gegen jede Usability-Regel, verschiedene Schriftarten zu mixen; Und die Schriftgröße sollte die Website festlegen, welche den Text unterbringt. Geschmackssache

Ist TinyMCE irgendwo dokumentiert, also vom Code her? Mich interessieren da echt nur die Basics, sozusagen der Farbcode vom Space-Shuttle, nicht die Schaltpläne für das Innenleben.

TinyMCE ist so ziemlich das komplexeste JavaScript das ich bisher gesehen habe, und noch dazu das beeindruckendste!

Gruß
Laura

http://wiki.moxiecode.com/index.php/TinyMCE:Index
Das TinyMCE Wiki beinhaltet relativ viel, auch eine API Dokumentation.

Zitat von DataFox

Aber ich muss auch zugeben der TinyMCE ist durchaus praxistauglich, denn man kann mit einem Brush den Spaghetti-Code aufräumen. Jetzt muss nur noch jemand so schlau sein und die Funktion dieses Brushes automatisch ausführen wenn man das Formular submittet.

Das sollte eigentlich ohnehin schon passieren. Zumindest entnehme ich das dem TinyMCE-Beispiel (einfach mal wild rumformatieren und dann auf „Submit“ klicken und den sauberen HTML-Code bestaunen).

Zitat von DataFox

Das *sollte* funktionieren Aber TinyMCE macht mir Angst. Das Ding ist nahezu perfekt! Allerdings brauche ich auch wirklich nur:

- B / I / K Formatierung
- Liste
- Link
- CODE einfügen
- H1 - H7 (Überschriften)
- ENTER = P; Absatz
- ENTER + SHIFT = BR; Zeilenumbruch
- Wiederherstellen / Rückgängig

TinyMCE kann ja fast so viel wie Word. Der Name täuscht

Für's Web finde ich es aber fatal in einem WYSIWYG so kram wie Schriftarten, Schriftgröße usw. anzubieten. Das geht gegen jede Usability-Regel, verschiedene Schriftarten zu mixen; Und die Schriftgröße sollte die Website festlegen, welche den Text unterbringt. Geschmackssache

TinyMCE ist nicht nur mächtig, sondern auch sehr flexibel. Schau dir mal die Minimal-Beispiele an, das sollte schon in die richtige Richtung gehen. Wie man diese Anpassungen vornimmt, steht in der von Felix schon verlinkten Dokumentation. Also kein Grund, das Rad neu zu erfinden

Grüße,
Matthias

@Felix: Yeay, Maddox!

@Laura: Ich war jetzt zu faul den ganzen Text meiner Vorredner zu lesen, daher sorry, wenn du schon ganz wo anders bist. Das vorweg nun zum eigentlich Teil:
Ich hab mich mal ein klein wenig mit WYSIWYG beschäftigt und dabei ist dieses Beispiel herausgekommen. Ist wenig Code, was den Vorteil hat das der Editor im Gegensatz zu MFC, MCE und Konsorten überschaubar ist. Andererseits wurde auf wenig Browser rücksicht genommen und er ist nicht so ganz ausgereift. Aber das Prinzip sollte verständlich rübergebracht sein.
Vielleicht hilft's dir ja weiter, wer weiß?

Ich für meinen Teil ab die Erfahrung gemacht, dass wegen einer fehlenden Standardisierung es sehr mühsam ist sowas selbst zu schreiben v.A. wenn am Ende kein Codealptraum von dem Editor erzeugt werden soll. Hilfreich war die Dokumentation vom IE bzw. dem Mozilla dabei.

Hey ich habe da mal eine frage. Was nutz man mehr iframe mit designMode oder das div mit contenteditable.


Das würde mich mal intressieren. Vielen dank.