WYSIWYG-Editor selber bauen - überlegt mit!

DataFox · 25. Januar 2008

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

kuddeldaddeldu · 25. Januar 2008

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

DataFox · 25. Januar 2008

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

kuddeldaddeldu · 25. Januar 2008

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

DataFox · 25. Januar 2008

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

Matthias Reitinger · 25. Januar 2008

kuddeldaddeldu hat gesagt.:
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.

kuddeldaddeldu hat gesagt.:
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

DataFox · 25. Januar 2008

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:

document.designMode = "on";

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

Gruß
Laura

Matthias Reitinger · 26. Januar 2008

DataFox hat gesagt.:
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.

DataFox hat gesagt.:
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

).

DataFox hat gesagt.:
Code:

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:

<!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:

<!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

kuddeldaddeldu · 26. Januar 2008

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...

Sven Mintel · 26. Januar 2008

DataFox hat gesagt.:
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 ;-)

WYSIWYG-Editor selber bauen - überlegt mit!

DataFox

Erfahrenes Mitglied

kuddeldaddeldu

Erfahrenes Mitglied

DataFox

Erfahrenes Mitglied

kuddeldaddeldu

Erfahrenes Mitglied

DataFox

Erfahrenes Mitglied

Matthias Reitinger

ɐɯıǝɹ

DataFox

Erfahrenes Mitglied

Matthias Reitinger

ɐɯıǝɹ

kuddeldaddeldu

Erfahrenes Mitglied

Sven Mintel

Mitglied

Neue Beiträge