wysiwyg-html editor -2- spezielle Probleme Bitte um Tipp's

[Patrick]

Hallo an alle,

ich bin zur Zeit dabei mir selbst einen wysiwyg editor in HTML mit Javascript zu erstellen den ich später in meinen CMS Systemen nutzen möchte.

Ich bin bereits auch gut voran gekommen, habe die wichtigsten Grundfunktionen wie Fett,Kursiv,Unterstrichen,Textausrichtung,Listenelemente und Umschalten zwischen Editor und Code Modus für den Firefox 3, IE7 hinbekommen.

Bin gerade dabei die Funktionen: Kopieren, Ausschneiden, Einfügen hinzuzufügen, habe dies auch beim IE7 hinbekommen ohne Probleme, dieser fragt zwar nach ob diese Funktionen wirklich zugelassen werden sollen, führt diese aber dann ohne Probleme aus. Mein Problem ist dies auch beim Firefox zu ermöglichen. Dieser hat laut
http://www.mozilla.org/editor/midasdemo/securityprefs.html
diese Funktionen deaktiviert. So wie ich dies verstehe kann ich diese Funktionen nur nutzen wenn ich auf meiner lokalen Festplatte die user.js Datei editiere.
Nun, dies kann es ja wohl hoffentlich nicht sein? Ich kann ja nicht jedem FF/Fx benutzer - der davon noch nicht einmal Ahnung hat, nahe legen, dass er seine eigene datei editieren muss damit er alle Funktionen des Editors nutzen kann. Gibt es mit javascript evtl. noch eine Möglichkeit diese Funktionen dennoch nutzen zu können?

Das zweite Problem welches sich mir stellt ist, wie kann ich den aktuellen Status eines formatierten Textes abfragen, also das z.B. mein Imagebutton welcher javascript zum Ausführen der Formatierungen und Ändern seiner Farbe hat weiss, dass ein Text z.B. Fett formatiert ist.
Man kennt das von jedem Word-Editor z.B. man makiert seinen Text formatiert ihn Fett und beim raus und wieder reinklicken in den Text wechselt der Button für Fett auch seinen Status in gedrückt oder nicht gedrückt - hoffe ich konnte beschreiben was ich meine.

Am wichtigsten wäre mir eine Lösung meines zweiten Problems mit einem 1-2 zeiligen javascript Code da ich hier überhaupt keinen Lösungsansatz zur Hand habe, stehe auf dem Schlauch.

Grüsse aus Köln

[EKKi]

Mahlzeit Patrick,

Nun, dies kann es ja wohl hoffentlich nicht sein?

Doch, kann es. Und das ist auch gut so. Schließlich bedeutet die Möglichkeit des Zugriffs mittels Javascript auf die systemeigene Zwischenablage (nichts anderes ist das Kopieren, Ausschneiden und Einfügen) ein erhebliches Sicherkeitsrisiko.

Ich kann ja nicht jedem FF/Fx benutzer - der davon noch nicht einmal Ahnung hat, nahe legen, dass er seine eigene datei editieren muss damit er alle Funktionen des Editors nutzen kann.

Doch, kannst und musst Du. Schließlich sollte jeder Benutzer selbst entscheiden, was irgendein dahergelaufener Seitenbetreiber mit seinem Javascript-Code auf dem Rechner des Benutzer anstellen darf.

Gibt es mit javascript evtl. noch eine Möglichkeit diese Funktionen dennoch nutzen zu können?

Nein, eben gerade nicht - ansonsten wäre diese Beschränkung eine Farce.

Das zweite Problem welches sich mir stellt ist, wie kann ich den aktuellen Status eines formatierten Textes abfragen, also das z.B. mein Imagebutton welcher javascript zum Ausführen der Formatierungen und Ändern seiner Farbe hat weiss, dass ein Text z.B. Fett formatiert ist.

Das kommt darauf an, wie Du das bisher technisch umgesetzt hast. Ich könnte mir z.B. vorstellen, den Text, der eine bestimmte Markierung bekommen soll, in ein <span> zu verfrachten, dem eine entsprechende Klasse zugewiesen wird. Dann kann ich ausgehend von jedem Textteil nachschauen, innerhalb welcher <span>s er sich befindet und welche Klassen diese haben.

MfG,
EKKi

[Patrick]

Das kommt darauf an, wie Du das bisher technisch umgesetzt hast. Ich könnte mir z.B. vorstellen, den Text, der eine bestimmte Markierung bekommen soll, in ein <span> zu verfrachten, dem eine entsprechende Klasse zugewiesen wird. Dann kann ich ausgehend von jedem Textteil nachschauen, innerhalb welcher <span>s er sich befindet und welche Klassen diese haben.

na gut, dann werde ich diese Funktionen wohl oder übel unsichtbar für Firefox benutzer schalten müssen da ich nicht möchte das diese auf die Buttons klicken und nichts passiert dabei und am ende denken, diese Funktionen wären unfertig programmiert.

zu meinem zweiten Problem,

es sieht so aus das das z.B. der Fettmakierte text durch das Javascript wie folgt formatiert wird:

<strong>makierter Text</strong>

ich stelle mir eine mögliche Abfrage so vor:

cursor steht im makierten text:

wenn links von text <strong> und nicht </strong> vorkommt dann wechsel das aussehen des Fett button.

Könnte dies so aussehen oder lieg ich damit komplett falsch? Und wie könnte so eine Umsetzung aussehen?

Gruß Patrick

[EKKi]

Mahlzeit Patrick,

es sieht so aus das das z.B. der Fettmakierte text durch das Javascript wie folgt formatiert wird:

Es sieht so aus? Ich dachte, DU programmierst den WYSIWYG-Editor mit Javascript? Heißt "Es sieht so aus" übersetzt "Ich habe keine Ahnung, was der Javascript-Code, den ich irgendwoher habe, eigentlich macht, aber ich frickel damit halt ein wenig herum ..."?

Könnte dies so aussehen oder lieg ich damit komplett falsch? Und wie könnte so eine Umsetzung aussehen?

Könnte funktionieren. Ich würde das allerdings eher mit DOM-Methoden versuchen und schauen, ob der aktuelle Textknoten ein Elternelement mit den gesuchten Kriterien hat ...

MfG,
EKKi

[Patrick]

Guten Abend Ekki,

Es sieht so aus? Ich dachte, DU programmierst den WYSIWYG-Editor mit Javascript? Heißt "Es sieht so aus" übersetzt "Ich habe keine Ahnung, was der Javascript-Code, den ich irgendwoher habe, eigentlich macht, aber ich frickel damit halt ein wenig herum ..."?

Naja ... ich fühle mich ein wenig ertappt, nun rumfrickeln würd ich das nicht ganz nennen, ich muss allerdings zugeben - JS ist nicht die Sprache mit der ich mich bisher am meisten auseinander gesetzt habe. Ich fühle mich mehr zu PHP hingezogen. Natürlich habe ich mich vorher schlau gemacht welche Möglichkeiten mir JS bietet und mir auch andere Editoren angeschaut, allerdings kopiere ich nicht einfach Code von links nach rechts - wie gesagt ich möchte das Zeug ja auch verstehen.
Die JS Befehle mit denen ich bisher in Kontakt kam, kann ich auch einsetzen ohne Probleme ohne rumzufrickeln und zu hoffen das etwas passiert, ich würde eben nur gerne herausfinden ob es einen bestimmten JS Befehl gibt um solch eine Abfrage mit 1-2 Zeilen abzubacken ohne eine eigene Funktion dafür schreiben zu müssen.
Bitte verzei mir wenn ich mich nicht ganz so auskenne, Programmieren ist ein Hobby von mir und nicht mein täglich Brot :)

Gruß Patrick

[Struppi]

Naja ... ich fühle mich ein wenig ertappt, nun rumfrickeln würd ich das nicht ganz nennen, ich muss allerdings zugeben - JS ist nicht die Sprache mit der ich mich bisher am meisten auseinander gesetzt habe. Ich fühle mich mehr zu PHP hingezogen.

Die natürlich grundverschieden sind und auch völlig andere Einsatzgebiete haben, also in keinsterweise vergleichbar sind.

Die JS Befehle mit denen ich bisher in Kontakt kam, kann ich auch einsetzen ohne Probleme ohne rumzufrickeln und zu hoffen das etwas passiert, ich würde eben nur gerne herausfinden ob es einen bestimmten JS Befehl gibt um solch eine Abfrage mit 1-2 Zeilen abzubacken ohne eine eigene Funktion dafür schreiben zu müssen.

Naja, hat EKKI ja schon angedeutet, es gibt DOM Methoden/Eigenschaften über die du z.b. an das Elternelment kommst. Wie du das konkret umsetzt können wir dir natürlich nicht sagen ohne deinen Code zu kennen.

Struppi.

[Dirk Dorweiler]

Hoi!

ich bin zur Zeit dabei mir selbst einen wysiwyg editor in HTML mit Javascript zu erstellen den ich später in meinen CMS Systemen nutzen möchte.

Willst Du dir den Schmerz wirklich antun? Du schneidest mit Deinen Fragen nur einen kleinen Teil der Probleme, die Dir noch bevorstehen...

Ich empfehle Dir eindringlichst:
http://tinymce.moxiecode.com/

Grüße

[Patrick]

Hi Dirk,

ich kenne diese freien editoren - klar - aber ich mag es solche dinge selbst zu entwickeln um die Technik dahinter zu verstehen und anwenden zu können auserdem möchte ich gerne auf fremd Software verzichten in eigenen Projekten, da ich diese auch evtl. verkaufen möchte.

[Dirk Dorweiler]

Heyho.

Ich wollte Dich nur vor vielen grauen Haaren bewahren ;-) Schau mal in den (imho ziemlich guten) Source vom TinyMCE rein und gewinne eine Idee von der eigentlichen Komplexität Deines Vorhabens...
BTW: Opera und Webkit hast Du mit Deinem Werk schon getestet? *g*

Der Verkauf Deiner Werke ist im übrigen mit der TinyMCE Lizenz kompatibel, beschäftige dich vielleicht mal damit ;-)

Grüße

[Felix Riesterer]

Lieber Patrick,

ich hatte auch mal meine Gehversuche mit diesem designMode bzw. contentEditable gemacht, um frustriert feststellen zu müssen, dass die Implementierungen zwischen den Browsern dermaßen unterschiedlich sind (man denke nur mit Schaudern an das selection-Objekt im Vergleich zwischen IE und FF!!), dass ich recht bald entnervt aufgegeben habe.

Vor diesem Hintergrund habe ich (der iach auch die Dinge lieber selber mache) sehr gerne den TinyMCE benutzt, um solche Ärgernisse dessen Entwicklern zu überlassen, die zum Einen wesentlich mehr von JS verstehen und zum Anderen schon sehr viel mehr Erfahrung auf diesem Gebiet haben und immer weiter ansammeln. Da kann ich als Hobby-Programmierer (so wie Du auch) einfach nicht mithalten.

BTW: Bitte gewöhne Dir den Deppenapostroph ganz schnell wieder ab!!

Liebe Grüße,

Felix Riesterer.

[Axel Richter]

Hallo,

Das zweite Problem welches sich mir stellt ist, wie kann ich den aktuellen Status eines formatierten Textes abfragen, also das z.B. mein Imagebutton welcher javascript zum Ausführen der Formatierungen und Ändern seiner Farbe hat weiss, dass ein Text z.B. Fett formatiert ist.

In meinem Ansatz (siehe http://forum.de.selfhtml.org/archiv/2008/8/t175915/#m1156877) wird soetwas angedeutet. Es werden in regelmaßigen Abständen (http://de.selfhtml.org/javascript/objekte/window.htm#set_interval@title=setInterval()) die Werte von queryCommadValue (Microsoft) und queryCommandState (Microsoft) abgefragt und ausgewertet. Das funktioniert auch in Mozilla und in Opera mit Einschränkungen.

viele Grüße

Axel