So erstellen Sie einen Rich-Text-Editor [closed]

Lesezeit: 3 Minuten

Benutzer-Avatar
kodomnitrix

Hey, ich möchte wissen, was das Konzept hinter der Erstellung des Rich-Text-Editors ist. Ich meine, wie man einen Rich-Text-Editor erstellt. Ich möchte die Umsetzung lernen.

PS: Bitte schlagen Sie nicht vor, YUI oder eine andere eingebaute Bibliothek zu verwenden. Ich möchte mir einen selber machen.

Also, was ist das Konzept dahinter?

Vielen Dank 🙂

  • Hier sind einige einfache Beispiele, die das Erlernen des Grundkonzepts ermöglichen: Auf der Suche nach einem einfachen Rich-Text-Editor

    – Pekka

    15. Mai 2011 um 8:12 Uhr

  • Versuche dies codemasala.com/blog/2012/09/22/…

    – Rajat Saxena

    9. Oktober 2012 um 14:50 Uhr

  • @Pekka웃 Ich weiß, es ist eine alte Frage, aber es sieht so aus, als ob dein Link nicht mehr verfügbar ist. Haben Sie eine Alternative?

    – Panpapier

    31. Juli 2019 um 3:26 Uhr

  • @Pekka웃-Link existiert nicht mehr 🙁

    – alter Junge

    1. Oktober 2019 um 7:43 Uhr

Benutzer-Avatar
Tim unten

Der einfachste Weg ist der folgende. Es wird von verwendet TinyMCE und CKEditor und viele andere. Es gibt viele Variationen: Insbesondere wenn Sie einen Code-Editor erstellen, gibt es clevere Tricks, die Sie mit Textareas und einer monospaced Schriftart anwenden können.

  • Erstellen Sie dynamisch einen Iframe und platzieren Sie den bearbeitbaren Inhalt im Dokument dieses Iframes
  • Stellen Sie den Iframe so ein, dass er bearbeitbar ist, indem Sie entweder das Dokument festlegen designMode Eigenschaft auf “on” oder durch Setzen von its <body> Element contentEditable Eigenschaft auf wahr. Beachten Sie, dass designMode Unterstützung vor contenteditable in Firefox und ist daher viel weniger fehlerhaft.
  • Fügen Sie Schaltflächen (z. B. fett, kursiv, Bild einfügen usw.) an sinnvoller Stelle (z. B. direkt über dem bearbeitbaren Iframe) im Hauptdokument hinzu, die auf den ausgewählten Inhalt im Iframe wirken. Alle Browser liefern eine execCommand() Methode (vgl MSDN und MDNzum Beispiel) für viele dieser Aktionen, obwohl es einige Unterschiede in der genauen Funktionsweise und dem von ihnen erzeugten Markup gibt.

Das ist die Grundlage dafür, wie es funktioniert. Es gibt unzählige andere, komplizierte Dinge, die die meisten Editoren tun, die nicht sofort offensichtlich sind, zum Teil, um die vielen Unterschiede zwischen den Browsern auszubügeln, und zum Teil, um zusätzliche Funktionen bereitzustellen, die nicht von den integrierten Browserbefehlen abgedeckt werden. Es ist eine sehr komplizierte und schwierige Sache, es richtig zu machen, erfordert ein hohes Maß an Fachwissen und Engagement und sollte nicht auf die leichte Schulter genommen werden.

  • Wow. Ich fühlte mich in Ihrer letzten Zeile versichert, dass es ein hohes Maß an JS-Expertise erfordert..:) Können Sie etwas Licht ins Dunkel bringen, wie man Funktionen zum Einfügen von Bildern hinzufügen kann? Angenommen, der Benutzer zieht ein Bild von irgendwo in den iFrame. Jetzt hat der Benutzer eine ganze Menge Text eingegeben. Er lässt das Bild in der Mitte des Textes fallen. Wie kann man nun den gesamten Inhalt in drei Abschnitte unterteilen, einen – den Abschnitt über der Stelle, an der er heruntergefallen ist, dann das Bild selbst und dann das Zeug darunter. jQuery sortable wird nicht funktionieren, denke ich, weil man a nicht partitionieren kann div‘s Inhalt basierend auf einigen Koordinaten…

    – SexyBeast

    31. Januar 2013 um 19:52 Uhr

Benutzer-Avatar
Chris Bornhöft

Ich werde nicht vorschlagen, dass Sie sich andere ansehen, um sie zu verwenden, aber ich würde vorschlagen, einen Blick auf zu werfen jWYSIWYG um zu sehen, wie es in jQuery codiert ist.

1229700cookie-checkSo erstellen Sie einen Rich-Text-Editor [closed]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy