Auf die Implementierung einer Rich-Text-Editor in HTML?

Hier ist die demo:

http://www.kevinroth.com/rte/demo.htm

wenn ich firebugs zu inspizieren, um den source-code sehe ich, dass es iFrame nur, aber wie kann man den iFrame-text-Bereich Verhalten?? Irgendwelche Ideen auf, wie diese umzusetzen ist? Danke im

InformationsquelleAutor Tattat | 2011-12-02
  1. 8

    Als ich mache das für meine Aufgabe jetzt ist, habe ich eine kleine Menge der Forschung. Von dem, was ich herausgefunden haben, gibt es zwei Möglichkeiten, dies zu erreichen:

    Dokument.designMode

    Mit document.designMode in JavaScript wird der gesamte HTML-Dokument bearbeitet werden. Wie das ganze HTML-Dokument ist editierbar, vermutlich ein iframe benötigt wird, um die Kapselung der Bearbeitung, so dass der Benutzer nicht editieren kann jeder Teil der Seite, die Sie nicht wollen, zu Bearbeiten.

    Was ich sagen kann, die demo, die Sie verknüpft und der TinyMCE-Editor verwendet diese Methode.

    contenteditable

    Den contenteditable HTML-Attribut ist ähnlich, aber nicht erfordern eine iframe verwendet werden. Fügen Sie das Attribut für den tag-und all das innerhalb von HTML-es wird bearbeitbar, mit einem blinkenden cursor.

    Hier ist eine demo davon: http://html5demos.com/contenteditable

    Notes

    • Ich persönlich werde auf der Suche auf contenteditable für meine Aufgabe. Hier ist eine gute übersicht und details zum Thema: http://blog.whatwg.org/the-road-to-html-5-contenteditable
    • Als ich sage, dass ich getan haben, beschränkt sich die Forschung auf diese, so helfen Sie mir bitte korrigieren Sie alle Fehler 🙂
    InformationsquelleAutor gak
  2. -1

    In diesem Rahmen, den Sie können sehen, eine vollständige HTML-Quelltext, baut etwas, das sieht aus wie eine text-Bereich + toolbar + Zeug. Ein kompliziertes Javascript wird alles tun, den trick, der hinter. E. g. wenn Sie markieren Sie text und machen Sie es mutig mit der Symbolleiste als das Skript Orte <strong> - tags, um Ihren text und so weiter..

    • aber wie der Rahmen der text-Bereich, das habe ich überprüft Ihren Quellcode mit firebugs, es scheint, Sie haben keine textarea-Komponente auf dem Rahmen.
    • Ich denke, es fängt die Tastatur-Ereignisse ohne text-Bereich. Die keypressed-events werden direkt verarbeitet. Aber der code ist komprimiert, so schwer die Wahrheit zu sehen.
    • ja, der code ist komprimiert, deshalb bitte ich, es auf stackoverflow XD. aber ich glaube nicht, dass er/Sie arbeitet in der keypressed-events, denn ich sehe den cursor blinken
    • Sie können einfach entpacken Sie die richtext_compressed.js kann heruntergeladen werden von der Seite mit strictly-software.com/unpacker
    • Sicher, seine keypress-Ereignis: h.addEventListener("keypress", geckoKeyPress, true)
    • aber wie der blinkende cursor erklären?
    • Die isContentEditable CSS-Eigenschaft true auf den IFRAME-body. Bitte +1 me 🙂

    InformationsquelleAutor jabal
  3. -2

    Verwenden http://www.tinymce.com/ Es ist das beste rich-editor gibt. Funktioniert Super mit jedem browser, und es hat viele, viele Optionen. Es ist sehr einfach zu bedienen. Schauen Sie sich einfach die Beispiele und Dokumente. Es sind viele populäre blogs und CMS.

    • Ich weiß, es ist rich-text-editor gibt, aber ich würde am Liebsten meine eigenen. So, möchte nur wissen, die Idee hinter.
    • Er fragte nicht nach anderen Editoren, will er wissen, wie es funktioniert!
    • Oh, Ok. Sie müssen erstellen editor ' s DOM dynamisch. Machen Sie es richtig funktioniert mit jedem browser, ist nicht trivial. Ich empfehle Ihnen, überprüfen Sie im Quellcode von einigen Bibliotheken, so können Sie eine Idee.
    InformationsquelleAutor gorlok
Schreibe einen Kommentar