Erstellen Sie ein neues, leeres Dokument.
Zuletzt aktualisiert am
1. Mai 2021
In diesem Beispiel erstellen Sie die Erweiterung „Script Editor“ zum Erstellen von schwebenden Bedienfeldern, in denen der einer ausgewählten Skriptmarkierung zugrunde liegende JavaScript-Code in der Entwurfsansicht angezeigt wird. Die Erweiterung „Script Editor“ zeigt den JavaScript-Code im Element textarea eines HTML-Formulars an, das im schwebenden Bedienfeld scriptlayer definiert ist. Wenn Sie den ausgewählten Code im schwebenden Bedienfeld ändern, ruft die Erweiterung die Funktion updateScript() auf, um die Änderungen zu speichern. Wenn Sie beim Aufrufen von „Script Editor“ keine Skriptmarkierung ausgewählt haben, zeigt die Erweiterung den Text (no script selected) im schwebenden Bedienfeld blanklayer an.
Zum Erstellen dieser Erweiterung erstellen Sie schwebende Bedienfelder, programmieren JavaScript-Code und erstellen ein Menüelement.
Schwebende Bedienfelder erstellen
Oben in der HTML-Datei dieser Erweiterung sind die Header-Standardinformationen für das Dokument sowie ein title-Tag angegeben, das die Bezeichnung „Script Editor“ in die Titelleiste der schwebenden Bedienfelder einfügt.
Erstellen des Headers der HTML-Datei
-
-
Geben Sie folgenden Code ein:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Script Editor</title> <script language="JavaScript">
Die Erweiterung definiert zwei schwebende Bedienfelder, die entweder den Text (no script selected) anzeigen, wenn der Benutzer keine Skriptmarkierung ausgewählt hat, oder den JavaScript-Code, der der ausgewählten Skriptmarkierung zugrunde liegt. Mit dem folgenden Code werden die beiden schwebenden Bedienfelder bzw. absolut positionierten Elemente (AP-Elemente) blanklayer und scriptlayer definiert.
Erstellen der beiden schwebenden Bedienfelder
-
Fügen Sie den folgenden Code nach dem Header in die HTML-Datei ein:
<body> <div id="blanklayer" style="position:absolute; width:422px; ¬ height:181px; z-index:1; left: 8px; top: 11px; ¬ visibility: hidden"> <center> <br> <br> <br> <br> <br> (no script selected) </center> </div> <div id="scriptlayer" style="position:absolute; width:422px; ¬ height:181px; z-index:1; left: 8px; top: 11px; ¬ visibility: visible"> <form name="theForm"> <textarea name="scriptCode" cols="80" rows="20" wrap="VIRTUAL" ¬ onBlur="updateScript()"></textarea> </form> </div> </body> </html>
-
Speichern Sie die Datei unter dem Namen „scriptEditor.htm“ im Ordner „Configuration/Floaters“.
In beiden div-Tags wird mit dem Attribut style die Position (absolute), die Größe (width:422px und height:181px) und die visibility-Standardeinstellung (visible) der schwebenden Bedienfelder angegeben. Das Bedienfeld blanklayer verwendet das Attribut center und mehrere Zeilenumbruch-Tags (br), um den Text in der Mitte des Bedienfelds zu positionieren. Das Bedienfeld scriptlayer erstellt ein Formular mit einem einzelnen textarea-Tag, um den ausgewählten JavaScript-Code anzuzeigen. Mit dem textarea-Tag wird darüber hinaus festgelegt, dass beim Auslösen eines onBlur-Ereignisses nach einer Änderung des ausgewählten Codes die Funktion updateScript() aufgerufen wird, um den geänderten Text wieder in das Dokument zu schreiben.
JavaScript-Code verfassen
Der JavaScript-Code für die Erweiterung „Script Editor“ besteht aus der von Dreamweaver aufgerufenen Funktion für schwebende Bedienfelder selectionchanged() und der benutzerdefinierten Funktion updateScript().
selectionChanged(): Skriptmarkierung ausgewählt?
Die Funktion selectionChanged() ermittelt, ob in der Entwurfsansicht eine Skriptmarkierung ausgewählt wurde. Eine Skriptmarkierung wird in der Entwurfsansicht angezeigt, wenn eine JavaScript-Routine im body-Bereich eines Dokuments vorhanden ist und wenn im Bereich „Unsichtbare Elemente“ des Dialogfelds „Voreinstellungen“ die Option „Skripts“ ausgewählt ist. In der folgenden Abbildung ist eine Skriptmarkierung dargestellt:
Die Funktion selectionChanged() ruft zunächst die Funktion dw.getDocumentDOM() auf, um das Dokumentobjektmodell (DOM) für das Dokument des Benutzers abzurufen. Anschließend ruft sie die Funktion getSelectedNode() auf, um zu prüfen, ob es sich bei dem ausgewählten Knoten für das Dokument erstens um ein Element und zweitens um ein SCRIPT-Tag handelt. Wenn beide Bedingungen „true“ sind, bewirkt die Funktion selectionChanged(), dass das schwebende Bedienfeld scripteditor sichtbar ist, und lädt dieses schwebende Bedienfeld mit dem zugrunde liegenden JavaScript-Code. Darüber hinaus setzt sie die Eigenschaft visibility des schwebenden Bedienfelds blanklayer auf den Wert hidden. In der folgenden Abbildung ist das schwebende Bedienfeld scriptlayer mit dem ausgewählten JavaScript-Code dargestellt:
Wenn es sich bei dem ausgewählten Knoten weder um ein Element noch um ein script-Tag handelt, bewirkt die Funktion selectionChanged(), dass das schwebende Bedienfeld blanklayer sichtbar und das Bedienfeld scriptlayer ausgeblendet ist. Das schwebende Bedienfeld blanklayer zeigt den Text (no script selected) wie in der folgenden Abbildung an:
Hinzufügen der selectionChanged()-Funktion
-
Öffnen Sie die Datei „scriptEditor.htm“ im Ordner „Configuration/Floaters“.
-
Geben Sie im Header der Datei den folgenden Code ein.
function selectionChanged(){ /* get the selected node */ var theDOM = dw.getDocumentDOM(); var theNode = theDOM.getSelectedNode(); /* check to see if the node is a script marker */ if (theNode.nodeType == Node.ELEMENT_NODE && ¬ theNode.tagName == "SCRIPT"){ document.layers['scriptlayer'].visibility = 'visible'; document.layers['scriptlayer'].document.theForm.¬ scriptCode.value = theNode.innerHTML; document.layers['blanklayer'].visibility = 'hidden'; }else{ document.layers['scriptlayer'].visibility = 'hidden'; document.layers['blanklayer'].visibility = 'visible'; } } -
Speichern Sie die Datei.
updateScript(): Änderungen wieder in das Dokument schreiben
Die Funktion updateScript() schreibt das ausgewählte Skript wieder in das Dokument, wenn ein onBlur-Ereignis im textarea-Element des Bedienfelds scriptlayer ausgelöst wird. Das Formularelement textarea enthält den JavaScript-Code. Das onBlur-Ereignis wird ausgelöst, wenn textarea den Eingabefokus verliert.
-
Öffnen Sie die Datei „scriptEditor.htm“ im Ordner „Configuration/Floaters“.
-
Geben Sie im Header der Datei den folgenden Code ein.
/* update the document with any changes made by the user in the textarea */ function updateScript(){ var theDOM = dw.getDocumentDOM(); var theNode = theDOM.getSelectedNode(); theNode.innerHTML = document.layers['scriptlayer'].document.¬ theForm.scriptCode.value; } </script> </head> -
Speichern Sie die Datei.
Menüelement erstellen
Es genügt nicht, den Code für „Script Editor“ im Ordner „Configuration/Floaters“ zu speichern. Sie müssen zudem die Funktion dw.setFloaterVisibility('scriptEditor',true) oder die Funktion dw.toggleFloater('scriptEditor') aufrufen, um das schwebende Bedienfeld zu laden und sichtbar zu machen. Die Erweiterung „Script Editor“ kann am besten über das Menü „Fenster“ abgerufen werden, das in der Datei „menus.xml“ definiert ist. Sie müssen das menuitem-Tag erstellen, das einen Eintrag für die Erweiterung „Script Editor“ im Menü „Fenster“ erstellt (siehe folgende Abbildung).
Wenn Sie für das aktuelle Dokument zunächst eine Skriptmarkierung in der Entwurfsansicht und dann das Menüelement „Script Editor“ auswählen, ruft Dreamweaver das schwebende Bedienfeld „Script Editor“ auf und zeigt den JavaScript-Code an, der der Skriptmarkierung zugrunde liegt. Wenn Sie das Menüelement auswählen, ohne zuvor eine Skriptmarkierung auszuwählen, zeigt Dreamweaver das Bedienfeld blanklayer mit dem Text (no script selected) an.
-
Öffnen Sie die Datei „menus.xml“ im Ordner „Configuration/Menus“.
-
Suchen Sie das Tag, das mit <menuitem name="Tile _Vertically" beginnt und setzen Sie die Einfügemarke hinter das schließende /> des Tags.
-
Fügen Sie folgenden Code in eine neue Zeile ein:
<menuitem name="Script Editor" enabled="true" ¬ command="dw.toggleFloater('scriptEditor')"¬ checked="dw.getFloaterVisibility('scriptEditor')" /> -
Speichern Sie die Datei.
