Share
WYSIWYG-Editoren sind sehr beliebt. Möglicherweise haben Sie auch eines verwendet. Es gibt viele Bibliotheken, die Ihnen beim Einrichten Ihres eigenen Editors helfen. Obwohl sie schnell eingerichtet werden können, gibt es auch Nachteile bei der Verwendung dieser Bibliotheken. Zunächst sind sie aufgebläht. Die meisten von ihnen verfügen über ausgefallene Funktionen, die Sie möglicherweise nicht verwenden. Darüber hinaus kann das Anpassen des Erscheinungsbildes dieser Editoren Kopfschmerzen verursachen.
In diesem Lernprogramm bauen wir unseren eigenen, leichten WYSIWYG-Editor. Am Ende dieses Lernprogramms erhalten Sie einen Editor mit grundlegenden Formatierungsfunktionen, der nach Ihren Wünschen gestaltet wird.
Beginnen wir mit der Einführung von execCommand. Wir werden diesen Befehl verwenden, um unseren Editor ausführlich zu implementieren.
execCommand ist eine Methode des Dokumentobjekts. Dadurch können wir den Inhalt eines bearbeitbaren Bereichs bearbeiten. Wenn neben verwendet contentEditable, es kann uns dabei helfen, einen Rich-Text-Editor zu erstellen. Es gibt viele Befehle, wie das Hinzufügen eines Links und das Auswählen einer Auswahl Fett gedruckt oder kursiv, und Ändern der Schriftgröße oder -farbe. Diese Methode folgt der Syntax:
document.execCommand (Befehlsname, ShowDefaultUI, ValueArgument);
Befehlsname ist eine Zeichenfolge, die den Namen des auszuführenden Befehls angibt. ShowDefaultUIist ein Boolescher Wert, um anzugeben, ob die unterstützende Schnittstelle angezeigt werden soll oder nicht. Diese Option ist nicht vollständig implementiert und sollte am besten auf "false" gesetzt werden. ValueArgument ist eine Zeichenfolge, die Informationen wie Bild-URL oder Vordergrundfarbe. Dieses Argument ist auf gesetzt Null Wenn ein Befehl keinen Wert benötigt, um wirksam zu werden.
Wir müssen verschiedene Versionen dieser Methode verwenden, um verschiedene Funktionen zu implementieren. In den nächsten Absätzen werde ich alle nacheinander besprechen.
Befehle wie Fett, Rechtfertigen, Rückgängigmachen und Wiederherstellen benötigen kein ValueArgument. In solchen Fällen verwenden wir folgende Syntax:
document.execCommand (Befehlsname, false, null);
Befehlsname ist einfach der Name eines Befehls wie justifyCenter, justifyRight, Fett gedruckt, usw.
Befehle mögen Bild einfügen, Link erstellen und Vordergrundfarbe Ich brauche ein drittes Argument, um richtig zu arbeiten. Für diese Befehle benötigen Sie folgende Syntax:
document.execCommand (commandName, false, value);
Zum Bild einfügen, Der Wert wäre die URL des einzufügenden Bildes. Im Falle von Vordergrundfarbe, es wäre ein Farbwert wie # FF9966 oder ein Name wie Blau.
Zum Hinzufügen von HTML-Tags im Blockstil müssen Sie sie verwenden formatBlock wie Befehlsname und der Tag-Name als valueArgument. Die Syntax wäre ähnlich:
Accentsconagua
document.execCommand ('formatBlock', false, TagName);Diese Methode fügt um die Zeile, die die aktuelle Auswahl enthält, ein HTML-Tag im Blockstil hinzu. Es ersetzt auch alle dort vorhandenen Tags. Verlinke den Namen kann eines der Schlagzeilen-Tags sein (h1-h6), p oder Blockquote.
Ich habe hier die häufigsten Befehle besprochen. Sie können Mozilla besuchen, um eine Liste aller verfügbaren Befehle zu erhalten.
Mit den Grundlagen aus dem Weg, ist es an der Zeit, die Symbolleiste zu erstellen. Ich werde für die Buttons Font Awesome Icons verwenden. Sie haben vielleicht bemerkt, dass einige Unterschiede beiseite geschoben wurden execCommands haben eine ähnliche Struktur. Wir können dies zu unserem Vorteil nutzen, indem wir die folgenden Markierungen für Symbolleistenschaltflächen verwenden:
Wenn der Benutzer auf eine Schaltfläche klickt, können wir auf diese Weise feststellen, von welcher Version execCommand basierend auf dem Wert von Datenbefehl Attribut. Hier sind ein paar Knöpfe als Referenz:
H2
Das Datenbefehl Attributwert für die erste Schaltfläche ist h2. Nachdem wir diesen Wert in JavaScript überprüft haben, verwenden wir die formatBlock Version des execCommand Methode. Ähnlich für den letzten Button, hochgestellt schlägt vor, dass wir die Nr. verwenden müssen valueArgument Version von execCommand.
Erstellen Vordergrundfarbe und Hintergrundfarbe Buttons ist eine andere Geschichte. Sie werfen zwei Probleme auf. Je nachdem, wie viele Farben wir den Benutzern zur Auswahl anbieten, kann das Schreiben von so viel Code mühsam und fehleranfällig sein. Um dieses Problem zu lösen, können wir den folgenden JavaScript-Code verwenden:
var colorPalette = ['000000', 'FF9966', '6699FF', '99FF66', 'CC0000', '00CC00', '0000CC', '333333', '0066FF', 'FFFFFF']; var forePalette = $ ('. fore-Palette'); für (var i = 0; i < colorPalette.length; i++) forePalette.append(''); Beachten Sie, dass ich auch ein setze Datenwert Attribut für jede Farbe. Dies wird später als verwendet valueArgument in dem execCommand Methode.
Das zweite Problem ist, dass wir nicht immer so viele Farben anzeigen können, da dies viel Platz beansprucht und zu einer schrecklichen Benutzererfahrung führt. Mit etwas CSS können wir sicherstellen, dass die Farbpalette nur angezeigt wird, wenn ein Benutzer die entsprechenden Schaltflächen überquert. Das Markup für diese Schaltflächen muss ebenfalls in Folgendes geändert werden:
Um nur die Paletten anzuzeigen schweben, Wir benötigen folgendes CSS:
.Vorder-Palette,. Rück-Palette Anzeige: keine; .Over-Wrapper: hover-Vor-Palette, .back-Wrapper: Hover-.back-Palette display: block; Schwimmer: links; Position: absolut;
In der CodePen-Demo gibt es viele andere CSS-Regeln, um die Symbolleiste schöner zu machen, aber dies ist alles, was für die Kernfunktionalität erforderlich ist.
Nun ist es an der Zeit, unseren Editor funktionsfähig zu machen. Der dazu erforderliche Code ist überraschend klein.
$ ('. toolbar a'). click (Funktion (e) var Befehl = $ (this) .data ('Befehl'); if (Befehl == 'h1' || Befehl == 'h2' || Befehl == 'p') document.execCommand ('formatBlock', false, Befehl); if (command == 'forecolor' || command == 'backcolor') document.execCommand ($ (this) .data ( 'command'), false, $ (this) .data ('value')); if (command == 'createlink' || command == 'insertimage') url = prompt ('Geben Sie den Link hier ein:' , 'http: \ / \ /'); document.execCommand ($ (this) .data ('command'), false, url); else document.execCommand ($ (this) .data ('command'), falsch, null););Wir beginnen mit dem Anhängen eines Klickereignisses an alle Symbolleistenschaltflächen. Wenn Sie auf eine Symbolleistenschaltfläche klicken, wird der Wert von gespeichert Datenbefehl Attribut der jeweiligen Schaltfläche in der Variablen, Befehl. Dies wird später verwendet, um die entsprechende Version von aufzurufen execCommand Methode. Es hilft beim Schreiben von prägnanten Codes und vermeidet Wiederholungen.
Bei der Einstellung Vordergrundfarbe und Hintergrundfarbe, Ich benutze die Datenwert Attribut als drittes Argument. Link erstellen und Bild einfügen habe keine Konstante url Wert, so verwenden wir eine Aufforderung, um die Werte vom Benutzer zu erhalten. Sie können auch zusätzliche Prüfungen durchführen, um sicherzustellen, dass url ist gültig. Wenn die Befehl Variable erfüllt keine der ob Blöcke laufen wir die erste Version von execCommand.
So sieht unser WYSIWYG-Editor aus.
Sie können die Funktion zum automatischen Speichern auch mit implementieren lokaler Speicher dass ich in meinem letzten Tutorial besprochen habe.
Verschiedene Browser weisen geringfügige Implementierungsunterschiede auf. Denken Sie beispielsweise daran, dass bei der Verwendung formatBlock, Internet Explorer unterstützt nur Überschriften-Tags h1 - h6, Adresse und Vor. Bei der Angabe von müssen Sie auch die Tag-Trennzeichen angeben Befehlsname mögen .
Nicht alle Befehle werden von jedem Browser unterstützt. Internet Explorer unterstützt keine Befehle wie insertHTML und hiliteColor. Ähnlich, insertBrOnReturn wird nur von Firefox unterstützt. Auf dieser GitHub-Seite finden Sie weitere Informationen zu Browserinkonsistenzen.
Das Erstellen eines eigenen WYSIWYG-Editors kann eine großartige Lernerfahrung sein. In diesem Tutorial habe ich viele Befehle behandelt und CSS für das grundlegende Styling verwendet. Als Übung würde ich vorschlagen, dass Sie versuchen, eine Symbolleistenschaltfläche zu implementieren, um das Symbol festzulegen Schriftart einer Textauswahl. Die Implementierung wird ähnlich der von sein Vordergrundfarbe Taste.
Ich hoffe, Sie haben dieses Tutorial geliebt und etwas Neues gelernt. Wenn Sie Ihren eigenen WYSIWYG-Editor von Grund auf erstellt haben, können Sie im Kommentarbereich einen Link dazu erstellen.
