Eine kurze Analyse der Implementierungsprinzipien von Online-WYSIWYG-HTML-Editor_Javascript-Fähigkeiten

Heutzutage fördert die Website-Entwicklung zunehmend die Benutzererfahrung, und es gibt immer mehr Tools, die den Benutzern Komfort bieten, und der Online-HTML-Inhaltseditor sollte als einer der „älteren“ angesehen werden. Diejenigen mit einfachen Funktionen können Benutzern die Steuerung des Textstils wie Textfarbe, Schriftgröße usw. bieten, während diejenigen mit komplexen Funktionen sogar leistungsstarke Funktionen ähnlich wie Word bieten können. Obwohl es mittlerweile viele Open-Source-Editoren gibt, sind nicht viele davon wirklich einfach zu bedienen, sodass an der Verbesserung ständig gearbeitet wird.

Die meisten Editoren im Internet verfügen heute über sehr leistungsstarke Funktionen, die während der Verwendung natürlich auch viel Konfiguration erfordern. Wenn wir keinen so leistungsstarken Editor benötigen, können wir selbst einen implementieren, da der Code nicht kompliziert ist. Das Folgende ist eine kleine persönliche Erfahrung, die nur als Referenz dient (am Beispiel von ExtJS HTMLEditor).

1. Initialisierung. Wenn die Seite vollständig geladen ist, fügen Sie der Seite einen IFrame hinzu (optional). Hier ist zu beachten, dass Sie zum Ermitteln des Status der Seite warten müssen, bis die Seite vollständig geladen ist, bevor Sie fortfahren, um Fehler zu vermeiden, bei denen bestimmte Elemente nicht gefunden werden können.

2. Öffnen Sie die Bearbeitungsfunktion. Machen Sie den IFrame bearbeitbar (der folgende Code stammt aus dem HTMLEditor von ExtJS):

Code kopieren Der Code lautet wie folgt:

// Holen Sie sich das Fensterobjekt von iframe
getWin: function(){
           return Ext.isIE ? this.iframe.contentWindow : window.frames[this.iframe.name];
},

//Holen Sie sich das Dokumentobjekt von iframe
getDoc: function(){
           return Ext.isIE ? this.getWin().document: (this.iframe.contentDocument || this.getWin().document);
},

//Öffnen Sie das Dokumentobjekt und schreiben Sie Initialisierungsinhalte hinein, um es mit FireFox kompatibel zu machen
doc = this.getDoc();
doc.open();
doc.write('');
//Dokumentobjekt-Bearbeitungsmodus öffnen
doc.designMode = "on";
doc.close();

Auf diese Weise können Sie Inhalte in diesen einfachen Editor schreiben.

3. Holen Sie sich den Inhalt des Editors. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

//Das Body-Objekt des Editors abrufen
var body = doc.body ||. doc.documentElement;
//Den Inhalt des Editors abrufen
var content = body.innerHTML;
//Verarbeiten Sie den Inhalt, z. B. Ersetzen einiger Sonderzeichen usw.
//Ein bisschen Code

//Inhalt zurückgeben
Inhalt zurückgeben;

4. Stileinstellungen hinzufügen. Obwohl der obige Editor grundlegende Funktionen implementiert, ist er wirklich zu einfach. Einige einfache Stilimplementierungen sollten hinzugefügt werden. Die execCommand-Methode des Dokuments macht diese Idee möglich.

Code kopieren Der Code lautet wie folgt:

//Einheitliche Ausführungsbefehlsmethode
Funktion execCmd(cmd, value){
//Um das Dokumentobjekt zu erhalten, beziehen Sie sich auf den obigen Code
//Rufen Sie die execCommand-Methode auf, um den Befehl auszuführen
doc.execCommand(cmd, false, value === undefiniert ? null : value);
};

//Ändern Sie die ausgewählte Schriftart in Fettdruck, Strg-B
execCmd('bold');
//Unterstreichen, Strg-U
execCmd('underline');
//Zu Kursivschrift wechseln, Strg-I
execCmd('italic');
//Legen Sie die Farbe des Textes fest
execCmd('forecolor', Ext.isSafari || Ext.isIE ? '#' color : color);
//Einen Inhalt am Cursor einfügen
Funktion insertAtCursor(text){
//Um das Win-Objekt zu erhalten, beziehen Sie sich auf den obigen Code
if(Ext.isIE){
      win.focus();
var r = doc.selection.createRange();
If(r){
         r.collapse(true);
          r.pasteHTML(text);                          }else if(Ext.isGecko || Ext.isOpera){
      win.focus();
​​execCmd('InsertHTML', text);
}else if(Ext.isSafari){
​​execCmd('InsertText', text);
}
}

5. Gehen Sie einen Schritt weiter. Jetzt können Sie den Stil ändern. Wenn der Editor über eine Symbolleiste verfügt (dies sollte unvermeidlich sein), möchten wir auch, dass die Schaltflächen in der Symbolleiste automatisch hervorgehoben oder entsprechend dem Stil der Cursorposition normal angezeigt werden. Die Methode queryCommandState() des Dokuments ermöglicht die Verwirklichung dieser Idee.

Code kopieren Der Code lautet wie folgt:

//Um das Dokumentobjekt zu erhalten, beziehen Sie sich auf die gegenüberliegende Seite
//Ob der Cursor fett ist
var isBold = doc.queryCommandState('bold');
if(isBold){
//Ändern Sie den Stil der Schaltfläche „Fett“
}
//Natürlich kann der obige Code zusammengeführt werden, dies ist nur ein Hinweis

//Unterstreichen
doc.queryCommandState('underline');
//kursiv
doc.queryCommandState('italic');

Dieser Artikel bietet nur eine einfache Idee zur Implementierung des Editors und einige der Codes können direkt verwendet werden. Freunden, die ihren eigenen Editor implementieren möchten, wird empfohlen, auf den HTMLEditor-Code in ExtJS zu verweisen, der einfach und klar ist und darauf erweitert werden kann.

Eine letzte Erinnerung: Achten Sie unbedingt auf Browserkompatibilitätsprobleme und warten Sie nicht bis zum Ende, um die Kompatibilität zu testen. Bei einer so großen Menge an JavaScript-Code sind Anpassungen schmerzhafter.