nicht angemeldet
Rich Text Editor Tutorial
Hallo. Ich bin gerade dabei, zwecks Übung, mir ein HTML Rich Text Editor zu programmieren. In JavaScript und JQuery. Das Problem ist, ich finde keine Tutorials. Ich habe jetzt einfach mal angefangen, und mein erstes Problem ist, wie setze ich den designMode eines Frames auf on?
Das habe ich geschrieben:
$("#textEditor").attr("designMode", "on");
$("#textEditor").open();
$("#textEditor").write("<head><style type='text/css'>body{ font-family:arial; font-size:13px;}</style></head>");
$("#textEditor").close();
Da sind allerdings Fehler drinnen, die ich nicht finden kann.
Danke im voraus für Verbesserungen an dem Code und vielleicht eventuell ein Link zu einem Tutorial(geht auch in Englisch), welches JQuery benutzt.
-
wie setze ich den designMode eines Frames auf on?
$("#textEditor").attr("designMode", "on");
Den designMode musst du am document-Objekt anschalten, nicht am iframe-Element.
$("#textEditor").open();
$("#textEditor").write("<head><style type='text/css'>body{ font-family:arial; font-size:13px;}</style></head>");
$("#textEditor").close();Das jQuery-Objekt bietet keine open-, write- und close-Methoden. Du musst auf das document-Objekt zugreifen, das bietet diese Methoden.
Über contentDocument kannst du ausgehend von einem iframe-Element (dem DOM-Objekt selbst, nicht dem jQuery-Wrapper!) auf das document-Objekt des Dokuments darin zugreifen:
[code lang=html]<iframe id="the-iframe"></iframe>
~~~javascript var iframeDocument = $('#the-iframe').get(0).contentDocument; iframeDocument.designMode = 'on'; iframeDocument.open(); iframeDocument.write('<!DOCTYPE html><html>…</html>'); iframeDocument.close();(Ungetestet)
Danke im voraus für Verbesserungen an dem Code und vielleicht eventuell ein Link zu einem Tutorial(geht auch in Englisch), welches JQuery benutzt.
Schau dir einmal den Code eines einfachen jQuery-RTE-Plugins an. Die machen in der Regel nicht viel.
http://code.google.com/p/lwrte/
http://code.google.com/p/rte-light/
https://github.com/buntekuh/jquery-rteMathias