HTML and CSS Reference
In-Depth Information
3.3 Laden der JavaScript-Komponente
Mit
setUrl
wird ein HTML-Dokument geladen, das den eigentlichen Editor enthält. Wir erstellen es
selbst mit einem beliebigen Texteditor. Es besteht mindestens aus dem HTML-Grundgerüst und zwei
SCRIPT
Tags. Das erste Tag wird zum Laden des JavaScript-Projekts (bei uns der CKEditor) benö-
tigt, und das zweite beinhaltet ein minimales Initialisierungsskript. Dieses sorgt in unserem Beispiel
dafür, dass eine neue Editorinstanz erzeugt und an die volle Größe des Dokuments angepasst wird.
Damit es zum richtigen Zeitpunkt (nach dem Laden des restlichen Dokuments) ausgeführt wird, be-
nutzen wir das
"load"-
Event des
BODY
Tags (Listing 3.2).
<head>
<script type="text/javascript" src="
/resources/ckeditor.js"></script>
<script type="text/javascript">
editor = {};
editor.createEditor = function() {
editor.instance = CKEDITOR.appendTo( document.body );
editor.instance.on( "dataReady", function() {
editor.instance.execCommand( "maximize" );
}
} );
}
</script>
</head>
<body onload = "editor.createEditor()" >
</body>
</html>
Listing 3.2
Die fertige Datei wird in unserem Projekt in einen neuen Ordner
resources
innerhalb des
src
-Ordners
abgelegt. Dorthin kopieren wir auch alle anderen benötigten Dateien (JavaScript, CSS, Bilder). Aus
Performancegründen ist es wünschenswert, dass der gesamte JavaScript-Quelltext in nur einer Datei
vorliegt (hier
ckedior.js
), die von möglichst geringer Größe ist. Schließlich muss der gesamte Code
in jeder neuen Instanz des Widgets neu interpretiert werden. Wenn möglich entfernt man daher die
Teile des JavaScript-Projekts, die man voraussichtlich nicht benötigt, und komprimiert alle Quelltex-
te in eine JavaScript-Datei. Beim CKEditor ist das dank seines Plug-in-Konzepts und eines eigenen
Kompressionstools kein Problem [3]. Wenn das Projekt keinen eigenen Skriptkompressor anbietet
