FCKEDITOR -Quellcodeanalyse (i) Chinesische Annotationsanalyse von fcKeditor.js hat in den letzten Tagen den Quellcode von FCKeditor untersucht (Fckeditor ist ein Web -Editor mit einer Vielzahl von Anwendungen im Netzwerk). Ich muss Nileaderblog für seine harte Übersetzung danken.
Ich habe fast das gesamte Internet gesucht, und es scheint, dass ich viel über die fckconfig.js -Datei erklärt habe, aber die Informationen über die Kern -FCK -Datei von fckeditor.js sind fast 0.
Daher habe ich einen ganzen Tag damit verbracht, Zahnpasta zu drücken, um die Kerndatei fckeditor.js, fckeditor.js, als Referenz durch Internetnutzer, die auch Fckeditor lernen, zu kommentieren.
Angesichts der Tatsache, dass das Niveau des Autors begrenzt ist, weisen Sie hier bitte auf die unangemessenen Punkte in meinen Kommentaren hin, um andere irreführende andere zu vermeiden. Danke.
Es wird empfohlen, es in Ihre IDE oder zu kopieren oder
Hinweis: Dieser Artikel basiert auf fckeditor2.6.5
Weitere maßgebliche Informationen finden Sie im FCK Official Developers Guide
Die Codekopie lautet wie folgt:
/**
*
**********Copyright***************
*-------- von Nileader ----
*---- Version 1.00 2009-10-18 ----
*---- Einmal kopiert, markiert http://www.nileader.cn
*
* Von Nileader kommentierter Klassenklasse
* @param {Object} Instanzenname Der eindeutige Name des Editors (entsprechend der ID) ist ein nicht geretteter Parameter.
* Breite, Höhe, Symbollbarset, Wert sind alle optionalen Parameter
*/
var fckeditor = function (Instanzename, Breite, Höhe, Symbollbarset, Wert)
{
// Grundlegende Eigenschaften des Editors Hinweis: Diese Dinge haben Vorrang vor der Konfiguration in fckconfig.js
this.inStainName = instacnaName; // Der eindeutige Name des Editors (gleichwertig zu ID) (muss haben!)
this.width = width || "100%"; // Die Breite ist standardmäßig 100%
this.height = Höhe || '200'; // Die Breite ist standardmäßig 200
this.toolBarSet = Symbolleblauber || 'Standard'; // Der Name des Toolssatzes ist der Standardwert standardmäßig
this.Value = value || ''; // Initialisieren Sie den HTML -Code des Editors, der Standardwert ist leer
// Der Standard -Root -Pfad, wenn der Editor initialisiert wird, soll FCK schreiben. Alle verwendeten Pfade werden standardmäßig zum / fckeditor / vom Verzeichnis von fckeditor.basepath.
this.basepath = fckeditor.basepath;
this.Checkbrowser = true; // Unabhängig davon
this.DisplayErrors = true; // Ob es mit Fehlern angezeigt wird, der Standard ist wahr
this.config = new Object ();
// Ereignisse
this.onError = null; // Funktion (Quelle, Errornumber, Errordesschreibung) Benutzerdefinierte Fehlerbehandlungsfunktion
}
Fckeditor.basepath = '/fckeditor/'; // FCKs Standard -Root -Verzeichnis
Fckeditor.minHeight = 200; // die Grenzen der Höhen- und Breite
Fckeditor.minwidth = 750;
Fckeditor.prototype.version = '2.6.5'; // Versionsnummer
Fckeditor.prototype.versionBuild = '23959';
/**
* Rufen Sie createHtml () auf, um den HTML -Code des Editors zu generieren und den Editor auf der Seite auszugeben
*/
Fckeditor.prototype.create = function ())
{
// Aufrufen der Methode createHtml ()
document.write (this.createhtml ());
}
/**
* @return shtml HTML -Code zum Generieren des Editors
*/
Fckeditor.prototype.createhtml = function ())
{
// Überprüfen Sie, ob ein Instanzenname vorhanden ist. Es wird kein HTML -Code generiert
if (! this.inStainName || this.inStainName.length == 0)
{
this._throwerror (701, 'Sie müssen einen Instanznamen angeben.');
zurückkehren '' ;
}
// Rückgabewert der Funktion
var shtml = '';
/*
* Wenn der Browser des Benutzers mehrere voreingestellte Browser trifft,
* Generieren Sie ein Textfeld mit id = this.inStainName name = this.instoncName, der De -facto -Inhaltspeicher
*/
if (! this.checkbrowser || this._iscompatibleBrowser ())
{
// Setzen Sie diesen Eingang nach, nachdem der FCK -Anfangswert entkommen ist
shtml + = '<Eingabe type = hidden id =' + this.instoncenName + 'name =' + this.inStainName + 'value =' + this._htmlencode (this.value) + 'style = display: keine style = display: keine />';
// generieren Sie eine versteckte Eingabe, um den Inhalt in dieser Konfiguration zu platzieren
shtml += this._getConfightMl ();
// Code zum Generieren des Iframe des Editors
shtml += this._getIframehtml ();
}
/**
* Wenn der Browser des Benutzers nicht mit den Standard -FCK -Browsern kompatibel ist
* Es können nur traditionelle Textbereiche gefunden werden
*/
anders
{
var swidth = this.width.toString (). indexof ('%')> 0? this.width: this.width + 'px';
var shight = this.height.toString (). Indexof ('%')> 0? this.height: this.height + 'px';
shtml + = '<textArea name =' + this.inStainName +
'Zeilen = 4 cols = 40 style = width:' + swidth +
'; Größe:' + shight;
if (this.tabIndex)
shtml + = 'tabindex =' + this.tabIndex;
shtml += '>' +
this._htmlencode (this.value) +
'<// textArea>';
}
return shtml;
}
/**
* Verwenden Sie den Editor, um das entsprechende Textfeld zu ersetzen
*/
Fckeditor.prototype.replacetextArea = function ())
{
// Wenn Sie bereits die Tag -ID = this.inStainName ___ Frame haben, kehren Sie direkt zurück
if (document.getElementById (this.instancename + '___frame'))
zurückkehren ;
// Wenn der Browser des Benutzers mehrere voreingestellte Browser trifft
if (! this.checkbrowser || this._iscompatibleBrowser ())
{
// Wir müssen die Elemente zuerst mit der ID und dann mit dem Namen überprüfen.
// Holen Sie sich das HTML -Tag von id = this.instazenname
var otextArea = document.getElementById (this.inStainName);
// Holen Sie sich alle Tags von name = this.instaceName
var colelementsByname = document.getElementsByName (this.instoncnAname);
var i = 0;
/*
* In Anbetracht der Benennung des HTML -Tags des Benutzers wird nicht standardisiert, so wird festgestellt, dass sich der Autor auf den Benutzer bezieht.
* Name = this.instazenname wird auch auf anderen Tags auf derselben Seite verwendet
*/
while (otextarea || i == 0)
{
// Reisen Sie bis zum textarea -Tag von name = this.inStandename gefunden und OtextArea zugewiesen werden
if (otextArea && otextarea.tagname.tolowerCase () == 'textarea')
brechen;
otextArea = colelementsByName [i ++];
}
// Wenn es kein Tag mit ID oder Name davon gibt. Instenzname wird ein Fehlerbox angezeigt
if (! otextarea)
{
ALERT ('Fehler: Der Textbereich mit ID oder Name, der auf' + this.inStainName + 'festgelegt wurde, wurde nicht gefunden);
zurückkehren ;
}
/*
* Nachdem bestätigt wurde, dass das textarea -Tag mit name = this.instaceName existiert, weisen Sie ihm den Code des Editors zu
*/
otextarea.style.display = 'none';
// Wenn die Registerkarteschlüsselreihenfolge auf der Seite für solche Textea -Tags definiert ist
if (otextArea.tabIndex)
this.tabIndex = otextarea.tabIndex;
this._inSerthtmlbefore (this._getConfightMl (), otextArea);
this._inSerthtmlbefore (this._getIframehtml (), otextArea);
}
}
/**
* Fügen Sie den HTML -Code vor dem angegebenen Seiten -Tag ein
* @param {Objekt} HTML -Code soll eingefügt werden
* @param {Objekt} angegebenes Seiten -Tag (Objekt)
*/
Fckeditor.prototype._inSerthtmlbefore = Funktion (HTML, Element)
{
if (element.insertadjacentHtml) // IE private InsertAdjacentHtml -Methode
element.insertadjacentHtml ('vorabgin', html);
sonst // Nicht-I-Browser
{
var orange = document.createrange ();
orange.setStartBefore (Element);
var Ofgragment = orange.createContextualFagment (HTML);
Element.ParentNode.insertbefore (Ofgragment, Element);
}
}
/*
* Generieren Sie eine versteckte Domain, indem Sie dies bearbeiten. CONfig [].
* Zum Beispiel:
* this.config ['nileader'] = 1104, this.config ['Leaderni'] = Nichao ...
* Dann sconfig =… & nileader = 1104 & Leaderni = Nichao…
* Natürlich wird SCONFIF am Ende in eine prozentuale Codierung der Enkoduskomponentfunktion umgewandelt und in einen versteckten Eingang eingesetzt
*/
Fckeditor.prototype._getConfightml = Funktion ())
{
var sconfig = '';
für (var o in this.config)
{
if (sconfig.length> 0) sconfig += '&';
// Die Encodeuricomponent -Funktion wird in prozentuale Codierung umgewandelt
SCONFIG + = CODORIComponent (o) + '=' + cododeuricomponent (this.config [o]);
}
return '<Eingabe type = hidden id =' + this.instancename + '___config value =' + sconfig + 'style = display: keine style = display: none />';
}
/*
* Generieren Sie die HTML des Iframe. Hier beinhaltet es die Bestimmung von SRC
*/
Fckeditor.prototype._getIframehtml = Funktion ())
{
var sfile = 'fckeditor.html';
// Sonderfall, das Fenster, in dem sich Fckedito befindet, ist nicht in den Browser eingebettet
versuchen
{
if ((/fcKSource = true/i) .Test (window.top.location.search))
SFILE = 'fckeditor.original.html';
}
fangen (e) { /* Ignorieren Sie diese Ausnahme. Oft ist das Fenster, in dem sich Fckedito befindet, in den Browser eingebettet. */}
/*
* Eine Sache, die hier zu beachten ist:
* Wie IFrame funktioniert: Wenn sich der Iframe im bearbeitbaren Zustand befindet, wird die Seite, auf der SRC tatsächlich bearbeitet wird
* Hier ist ein Slink, um es in das IFrame -Tag zu setzen
*/
// Slink ist diese De -facto -Seite aus dem Stammverzeichnis von FCK, z.
var Slink = this.basepath + 'editor/' + SFILE + '? INSTANCENAME =' + CODURIComponent (this.inStainName);
if (this.toolBarset)
Slink + = '& Symbollbar =' + this.toolBarSet;
// Erstellen Sie natürlich einen echten HTML -Code für die Bearbeitung von IFramer. Setzen Sie natürlich Src = Slink
var html = '<iframe id =' + this.instoncename +
'___Frame src =' + Slink +
'src =' + Slink +
'width =' + this.width +
'height =' + this.height;
// Wenn die Traversalreihenfolge mit der Registerkarte festgelegt ist, weisen Sie sie dem Iframe zu
if (this.tabIndex)
html + = 'tabindex =' + this.tabIndex;
html += 'Framborder = 0 scrolling = no> </iframe>';
Rückgabe html;
}
/*
* Überprüfen Sie, ob der Bowser des Benutzers die Standardeinstellung von FCK ist
* Diese Methode ist nur die FK -Firma, die OO verfolgt, bedeutungslos
*/
Fckeditor.prototype._iscompatibleBrowser = Funktion ()
{
return fckeditor_iscompatibleBrowser ();
}
/**
* Fehler geworfen
* @param {Objekt} Errornumber -Fehlernummer
* @param {Object} Errordescription Fehlerübersicht
*/
Fckeditor.prototype._throwerror = Funktion (Errornumber, Errordeskription)
{
this.Errornumber = Erornumber;
this.errordescription = erordescription;
// Ob es mit Fehlern angezeigt wird, der Standard ist wahr
if (this.displayErrors)
{// Drucken Sie die Fehlernummer und die Fehlerübersicht aus
document.write ('<div style = color: #ff0000 style = color: #ff0000>');
document.write ('[fcKeditor error' + this.errornumber + ':' + this.errordescription + ']');
document.write ('</div>');
}
// onErrror, ob die Fehlerbehandlungsfunktion angepasst wird, falls definiert, wird sie damit behandelt
if (typeof (this.onError) == 'Funktion'))
this.onError (this, errornumber, errordescription);
}
/**
* Es entkommen Text
* @param {Object} Text zu entkommen
* @return String Text nach der Flucht
*/
Fckeditor.prototype._htmlencode = Funktion (Text)
{
if (typeof (text)! = String)
text = text.toString ();
// Ersetzen Sie alle & <> in der Zeichenfolge durch die entsprechenden Escape -Zeichen
text = text.replace (
/&/g, &). Ersetzen (
// g,) .replace (
/</g, <). Ersetzen (
/>/g,>);
Text zurückgeben;
}
;(Funktion()
{
// Weisen Sie das TextArea -Element auf der Seite der Editor -Variablen zu
var textareatoeditor = Funktion (textarea)
{
var editor = new fckeditor (textArea.name);
editor.width = math.max (textarea.offsetwidth, fckeditor.minwidth);
editor.height = math.max (textarea.offseteight, fckeditor.minHeight);
Rückgaberedakteur;
}
/**
* Ersetzen Sie alle in dem Dokument verfügbaren <textArea> -Anemente durch fckeditor
* Instanzen.
*
* // Ersetzen Sie alle <textArea> Elemente in der Seite.
* Fckeditor.replaceAlltextareas ();
*
* // Ersetzen Sie alle <textArea class = myclassName> Elemente in der Seite.
* Fckeditor.replaceAlltextareas ('myclassName');
*
* // Ersetzen Sie selektiv <textarea> Elemente basierend auf benutzerdefinierten Behauptungen.
* Fckeditor.replaceAlltextareas (Funktion (textarea, Editor)
* {{
* // benutzerdefinierte Code, um das Ersetzen zu bewerten, und geben Sie Falsch zurück, wenn er
* // darf nicht erledigt werden.
* // Es gibt auch den Editor -Parameter übergeben, sodass der Entwickler kann
* // passen Sie die Instanz an.
*});
*/
Fckeditor.replaceAlltextareas = function ())
{
// Erhalten Sie alle Textea -Elemente
var textareas = document.getElementsByTagName ('textarea');
für (var i = 0; i <textareas.length; i ++)
{
var editor = null;
var textarea = textareas [i];
var name = textArea.name;
// Das Namensattribut muss existieren.
if (! name || name.length == 0)
weitermachen ;
if (typeof argumente [0] == 'String')
{
// Der Name des Textbereichsklassens kann als Funktion übergeben werden
// Parameter.
var classRegEx = new Regexp ('(?:^|)' + Argumente [0] + '(?: $ |)');
if (! classRegex.test (textarea.className))
weitermachen ;
}
sonst wenn (Typof Argumente [0] == 'Funktion')
{
// Eine Behauptungsfunktion könnte als Funktionsparameter übergeben werden.
// Es muss ausdrücklich false zurückgeben, um ein bestimmtes <textarea> zu ignorieren.
editor = textAreatoeditor (textarea);
if (Argumente [0] (TextArea, Editor) === Falsch)
weitermachen ;
}
if (! Editor)
editor = textAreatoeditor (textarea);
editor.replacetextarea ();
}
}
}) ();
/**
* Die Browserkompatibilität erkennen
* Verwenden einiger Informationen, die SAGENT vom Navigator -Objekt zurückgegeben haben, bestimmt, dass der Browser Informationen einschließlich des Codenamens des Browsers, des Browsernamens, der Browser -Versionssprache und anderer Informationen und Kleinbuchstaben zurückgibt
* Zum Beispiel:
* Mozilla/4.0 (kompatibel; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)
*
* Bei der Beurteilung des IE -Browsers wird die unterstützte bedingte Zusammenstellung nach der Verwendung von IE4.0 hinzugefügt.
* Da es nur vom IE unterstützt wird, wird diese Eigenschaft in W3C -Standardbrowsern nicht unterstützt. Daher wird der IE mit dieser Funktion angemessen beurteilt
*/
Funktion fckeditor_iscompatibleBrowser ()
{
var sagent = navigator.useragent.tolowerCase ();
// Der aktuelle Browser ist Internet Explorer 5.5+
// Verwenden Sie eine bedingte Zusammenstellung, um IE in IE,/*@cc_on!@*/False == zu beurteilen! false == true,
// Wenn es sich um einen Nicht-I-Browser handelt, ignorieren Sie ihn,/*@cc_on!@*/False == false
if ( /*@cc_on!@* /false && sagent.indexof (mac) == -1) // nicht Apple Mac OS
{
var sbrowserversion = navigator.appversion.match (/msie (./..)/) × 1];
return (sBrowServersion> = 5,5);
}
// Gecko (Opera 9 versucht sich an diesem Punkt wie Gecko zu verhalten).
// Erkennung, ob es sich um Opera 9 -Browser handelt
if (navigator.product == Gecko && navigator.productSub> = 20030210 &&! (Typof (Opera) == 'Objekt' && Opera.Posterror))
zurückkehren;
// Opera 9.50+
if (window.opera && window.opera.version && parsefloat (window.opera.version ())> = 9.5)
zurückkehren;
// Adobe Air
// Vor dem Safari überprüft, da Air den Webkit Rich Texteditor hat
// Funktionen von Safari 3.0.4, aber die gemeldete Version ist 420.
if (sagent.indexof ('adobeAir/')! = -1)
return (sagent.match (/adobeair // (/d+)/) [1]> = 1); // Build muss mindestens V1 sein
// Safari 3+
if (sagent.indexof ('Applewebkit/')! = -1)
return (sagent.match (/Applewebkit // (/d+)/) [1]> = 522); // Build muss mindestens 522 sein (v3)
false zurückgeben;
}