Zur Boardunity Forenstartseite
  #1  
Alt 18.11.2008, 19:30
Mitglied
 
Registriert seit: 11.2008
Beiträge: 29

WYSIWYG Editor


Hallo Leute,

ich arbeite zur Zeit an einem WYSIWYG Editor.
Jetzt würde ich mir gerne Feedback zu dem Editor holen.

Ich weiß das da noch sehr viel zu machen ist.
Bin aber auch noch ziemlich neu im Thema Javascript.

weEdit

Würde mich auch freuen wenn Ihr Euch zu dem Design äußert.

Mit besten Grüßen
Wolfi
  #2  
Alt 18.11.2008, 20:50
Benutzerbild von TheCatcher
Mitglied
 
Registriert seit: 02.2008
Beiträge: 178
Das Design ist nett übersichtlich. was aber viel wichtiger ist, dass der Code auch xHTML oder HTML Valid ist. Denn sonst bringt das nichts....

  #3  
Alt 19.11.2008, 07:50
Mitglied
 
Registriert seit: 11.2008
Beiträge: 29
und daran werde ich auch noch arbeiten
danke für dein feedback

  #4  
Alt 21.11.2008, 19:02
Benutzerbild von codethief
Visionär
 
Registriert seit: 09.2003
Beiträge: 810
Großartig, dass es mal wieder neues in dieser Richtung gibt.
Ich denke aber, dass du den falschen Weg einschlägst. Dein WYSIWYG-Editor unterscheidet sich von gängigen zwar insofern, als dass man bei dir komplette Seiten erstellt und nicht nur reine Texte, jedoch glaube ich, dass man ihn dann nicht gut in bestehende Content Management Systeme integrieren kann, was für mich ein sehr wichtiger Faktor ist. Ich würde solche Seiteneinstellungen aber, wenn überhaupt, nur optional hinter einem Button verstecken.

Das Problem, welches ich generell bei WYSIWYG-Editoren sehe, ist, dass die Nutzer dazu tendieren, sich wie in Word zu verhalten. Sie stellen Schriftgrößen, -arten, -farben usw. ein und formatieren wie wild.
Das ist aber selten im Sinne des Webdesigners, der sich schließlich Gedanken über Aussehen und Typographie macht.

Editoren wie der WYMEditor (What you see is what you mean) scheinen mir deshalb sinnvoller zu sein. Dort kannst du voneinander getrennte Elemente, wie Überschriften, Texte, Bilder und Tabellen, einfügen. Dinge, wie Schriftart, -größe, -farbe und -ausrichtung sollten dem Webdesigner überlassen bleiben (d.h. effektiv einer CSS-Datei). (Du kannst dem Nutzer ja aber wie gesagt optional einen Einstellungsdialog für solche CSS-Eigenschaften zur Verfügung stellen.) Für Texte sollten dem Nutzer deshalb nur wenige Buttons wie Fett, Kursiv, Link, Hoch-/Tiefgestellt, Sonderzeichen u.ä. zur Verfügung stehen.

Auch der Nutzer wird das begrüßen: Weniger Buttons und eine übersichtlichere Struktur der Inhaltselemente bedeuten ein schnelleres und intuitives Bearbeiten. In vielen WYSIWYG-Editoren (TinyMCE, FCKEditor, ...) treten außerdem bei der Kombination von vielen Formatierungen immer noch sehr nervige Bugs auf (insbes. wenn direkt aus Word kopiert wird), offenbar liegt das z.T. auch an den Browsern selbst. Der WYSIWYM-Ansatz würde dir helfen, dies zu vermeiden, ebenso wie validen XHTML-Code zu generieren.

Ich würde sogar noch ein kleines Stück weiter gehen: Alle Inhaltselemente (s. oben) sollten strikt voneinander getrennt werden. D.h., jedes Element besteht aus einem eigenen Textfeld oder sogar einer ganzen Reihe von Textfeldern (bei komplexeren Inhaltselementen wie Bildern, Flashvideos und Formularen nötig). Die Textfelder müssten natürlich nicht sichtbar sein, sondern könnten auch wie im WYMEditor farbig unterlegt werden. Die strikte Trennung sollte außerdem daran deutlich werden, dass der Editor nicht nur ein kleines Textfeld, sondern um Einiges größer ist, sodass er, auch vom Aussehen her, für eine ganze Seite steht.
Ich empfehle dir auch dir mal anzuschauen, wie man Tabellen in TYPOlight bearbeitet. Das ist nämlich eine viel intuitivere und vor allem schnellere Variante als die, die normalerweise in WYSIWYG-Editoren angeboten wird.

Empfehlenswert ist es vermutlich auch, wenn du auf ein eigenes XML-Format setzt, um die Seitenelemente zu definieren. Das erleichtert vermutlich auch die Arbeit in Javascript, weil du nicht mehr komplizierte (X)HTML-Tags bearbeiten musst. Mit CSS kannst du dann deine XML-Daten formatieren und die Umwandlung in (sauberes) XHTML könnte dann eine XSLT-Datei (bzw. eine PHP-Datei XSLT-Prozessor) übernehmen.

AJAX wäre bei dem ganzen natürlich auch noch ein Plus.

Ich hoffe, du verzeihst mir, dass ich dir meine Ideen jetzt einfach so aufdränge. Aber ich warte schon sooo lange auf solch einen (perfekten) Editor.


PS: Die Leiste unterhalb des Eingabefeldes ist ein wenig verwirrend. Denn aktivierte Buttons werden nicht farbig unterlegt o.ä.

  #5  
Alt 21.11.2008, 20:48
Mitglied
 
Registriert seit: 11.2008
Beiträge: 29
hallo codethief,

vielen dank für deinen beitrag.
momentan liegt das projekt wieder auf eis, aber ich werde versuchen deine ideen umzusetzen.
du verstehst von der thematik anscheinend auch mehr als ich.
ich selbst bin gerade mal im 2. lehrjahr als mediengestalter und kann zwar mit allen begriffen, mit denen du so um dich wirfst, was anfangen.
allerdings habe ich noch keine ahnung wie ich das alles umsetzten kann.

aber deine vorschläge sind wirklich sehr hilfreich und ich freue mich sehr, dass du sie mir aufgedrängt hast

mit besten grüßen
wolfi

  #6  
Alt 28.11.2008, 23:06
Benutzerbild von codethief
Visionär
 
Registriert seit: 09.2003
Beiträge: 810
Zitat:
Zitat von Psilo Beitrag anzeigen
momentan liegt das projekt wieder auf eis
Schade, wie kommt's?

Zitat:
Zitat von Psilo Beitrag anzeigen
aber deine vorschläge sind wirklich sehr hilfreich und ich freue mich sehr, dass du sie mir aufgedrängt hast
Kein problem.

  #7  
Alt 29.11.2008, 13:36
Mitglied
 
Registriert seit: 11.2008
Beiträge: 29
Hab zur Zeit leider viel um die Ohren
Werde mich mit dem Editor erst dann befassen wenn ich wirklich zwei drei wochen zeit dafür habe.
den die jetzige version ist ja eigentlich fast nur in meiner freizeit entstanden.
hatte jeden tag arbeit usw..
vielleicht hock ich mich im weihnachtsurlaub mal wieder an den editor

beste Grüße
Wolfi

  #8  
Alt 01.12.2008, 20:23
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 973
Jaja, die Sache mit den Vorschau-Editoren, wie ich sie einfach nenne („WYSIWYG“ ist doch [TM] oder irgendein Patent, irgendwas war da mal… schon ein paar Jahre her). Ich bastel ja so nebenbei, wie ich Zeit finde, an der Neuauflage meines Webforums, und dafür soll eine Wiki-ähnliche Markup-Sprache zum Einsatz kommen, weil die einfacher als BBCode ist. Der Parser dafür ist bereits fertig.

Es klingt natürlich schon verlockend, einen Vorschaueditor dafür zu verwenden, vereinfacht das doch die Bedienung für Nicht-Techies die nicht wissen, wie man eine eckige Klammer eintippt. Das Problem ist nur, dass ein Vorschaueditor immer kompatibel zur Markup-Sprache bleiben muss, sonst gibt's u.U. schon beim ersten Zitat ein Problem.

Den WYM-Editor hab ich vor einiger Zeit schonmal gesehen (oder irgendeinen dieser Art zumindest) und find die Idee gut. Man markiert nur strukturelle Elemente des Texts (Hervorhebung, Listen, Überschriften), keinen Darstellungsstil wie Farbe oder Schriftart. Das entspricht ziemlich meiner Markup-Sprache.

Jetzt würde ich mir nur wünschen, dass es einen Vorschaueditor gibt, der sich an die Ausdrucksfähigkeit meiner Sprache hält und nicht mehr zulässt. Durch eine einfache Markup-Sprache werden natürlich Grenzen gesetzt, z.B. kann man keine Tabellen in Tabellen einfügen oder sowas. Alles was nicht in meiner Sprache darstellbar ist, soll dem Scheiber auch im Vorschaueditor nicht möglich sein. Nur dann kann es ein friedliches Miteinander von Plaintext- und Vorschau-Autoren geben.

Wie sowas im Detail umgesetzt werden kann weiß ich aber nicht. Da hab ich mir noch überhaupt keine Gedanken drüber gemacht. Momentan hab ich noch wichtigere Dinge zu tun, z.B. eine verwendbare Benutzeroberfläche, eine Suchfunktion und v.a. mal etwas Zeit…

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #9  
Alt 21.12.2008, 13:49
Mitglied
 
Registriert seit: 11.2008
Beiträge: 29
Hi,

habe das Ganze jetzt noch einmal überarbeitet und hoffe man findet es so besser.
Die Funktionen sind alle schön vom eigentlich Editor getrennt.
Somit entsteht (im Vergleich zur alten Version) keine unnötige Verzögerung beim Laden des Editors.

Zudem sind ein paar neue Funktionen hinzugekommen.

Der Link hat sich auch geändert
weEdit - Alles rund um Webdesign

Beste Grüße
Wolfi


Geändert von Psilo (02.06.2009 um 16:35 Uhr).
  #10  
Alt 29.12.2008, 16:49
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 973
Wieso klappen die Dropdown-Menüs nicht so zu wie überall anders auch?

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #11  
Alt 29.12.2008, 17:44
Benutzerbild von JonnyX
Sir SeVeN
 
Registriert seit: 10.2005
Beiträge: 887
Muss man es den immer machen wie die anderen?

  #12  
Alt 29.12.2008, 20:52
Benutzerbild von codethief
Visionär
 
Registriert seit: 09.2003
Beiträge: 810
Stört eben ein wenig, wenn man immer noch auf einen Button klicken muss um das Menü zu schließen.

  #13  
Alt 30.12.2008, 13:29
Mitglied
 
Registriert seit: 11.2008
Beiträge: 29
hi,

ich versuch mal das ganze zu ändern
stört wirklich

grüße

  #14  
Alt 30.12.2008, 18:40
Mitglied
 
Registriert seit: 11.2008
Beiträge: 29
erledigt

  #15  
Alt 02.01.2009, 09:43
Benutzerbild von LonelyPixel
UNB-Entwickler
 
Registriert seit: 01.2004
Ort: Erlangen
Beiträge: 973
Zitat:
Zitat von JonnyX Beitrag anzeigen
Muss man es den immer machen wie die anderen?
Nein, natürlich nicht. Aber man darf durchaus von den Fehlern lernen, die andere gemacht und/oder vermieden haben.

__________________
Yves Goergen
Softwareentwicklung, Fotografie, Webhosting, UNB Components (in Arbeit)
  #16  
Alt 02.01.2009, 14:13
Mitglied
 
Registriert seit: 11.2008
Beiträge: 29
naja,
jetzt ists ja wie bei den anderen

  #17  
Alt 02.06.2009, 12:34
neues Mitglied
 
Registriert seit: 05.2009
Beiträge: 6
Zitat:
Zitat von codethief Beitrag anzeigen
...
Editoren wie der WYMEditor (What you see is what you mean) scheinen mir deshalb sinnvoller zu sein. Dort kannst du voneinander getrennte Elemente, wie Überschriften, Texte, Bilder und Tabellen, einfügen. Dinge, wie Schriftart, -größe, -farbe und -ausrichtung sollten dem Webdesigner überlassen bleiben (d.h. effektiv einer CSS-Datei). (Du kannst dem Nutzer ja aber wie gesagt optional einen Einstellungsdialog für solche CSS-Eigenschaften zur Verfügung stellen.) Für Texte sollten dem Nutzer deshalb nur wenige Buttons wie Fett, Kursiv, Link, Hoch-/Tiefgestellt, Sonderzeichen u.ä. zur Verfügung stehen.
...
Auch der Nutzer wird das begrüßen: Weniger Buttons und eine übersichtlichere Struktur der Inhaltselemente bedeuten ein schnelleres und intuitives Bearbeiten. In vielen WYSIWYG-Editoren (TinyMCE, FCKEditor, ...) treten außerdem bei der Kombination von vielen Formatierungen immer noch sehr nervige Bugs auf (insbes. wenn direkt aus Word kopiert wird), offenbar liegt das z.T. auch an den Browsern selbst. Der WYSIWYM-Ansatz würde dir helfen, dies zu vermeiden, ebenso wie validen XHTML-Code zu generieren.

Ich hoffe, du verzeihst mir, dass ich dir meine Ideen jetzt einfach so aufdränge. Aber ich warte schon sooo lange auf solch einen (perfekten) Editor.
Hallo zusammen. Ich möchte so einen schlanken WYSIWYG-Editor schreiben, da mit TinyMCE und FCKEditor zu überladen sind (und zudem immer noch Nachbesserungen im Quelltext benötigen). Es gibt zwar die Möglichkeit mit execCommand zu arbeiten, ist aber nicht das was ich suche. Im Prinzip sollte es wie im TinyMCE / FCKEditor funktionieren nur mit eigenen und deutlich weniger Funktionen. Leider hab ich bisher noch nirgends eine Anleitung oder Beschreibung gefunden, wie sowas zu realisieren ist. Auch habe ich bisher nicht gefunden, in welcher Datei / welchen Dateien der genannten Editoren der entsprechende Code steht, um diesen anzupassen oder daraus zu lernen.
Es würde mir schon ein Beispiel reichen (z. B. wie bold umgesetzt wird). Weiss jemand, wo ich eine solche Anleitung oder ein solches Beispiel finde? Oder kann mir gar jemand sagen, wo der Code in den anderen Editoren steht?

  #18  
Alt 02.06.2009, 16:35
Mitglied
 
Registriert seit: 11.2008
Beiträge: 29
also bei diesem editor
weEdit - Webdesign
kannst du ja einfach mal in den quelltext kucken

du kannst mit textareas arbeiten oder mit einem editierbaren iframe

du musst dich einfach mal einarbeiten

logisch denken..
wenn du einen text fett machen willst dann überlege dir wie du vor und hinter dem markierten text im editor ein strong bekommst...

einen wirklichen wegweiser zum schreiben eines wysiwyg editors wirds nicht geben..

  #19  
Alt 08.06.2009, 01:24
Benutzerbild von codethief
Visionär
 
Registriert seit: 09.2003
Beiträge: 810
Ich habe mich vor Ewigkeiten mal an einem WYSIWYG-Editor versucht. Im Anhang findest du die wesentlichen Dateien (Icons & Bilder fehlen). Vieleicht hilft dir das ja, einen Einstieg zu finden.
Angehängte Dateien
Dateityp: zip wysiwyg.zip (8,9 KB, 60x aufgerufen)

Antwort


Stichworte
editor, html, html-editor, online, online-html-editor, wysiwyg, wysiwyg-editor

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Aktiviertes Javascript macht den Editor unbenutzbar shob Informationen, Anregungen und Kritik 2 19.10.2008 11:21
CSS Editor JonnyX Web Design und Grafik 3 01.12.2007 22:04






1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24