Maak een nieuw, leeg document.
Laatst bijgewerkt op
2 mei 2021
In dit voorbeeld maakt u een Scripteditor-extensie waarmee een zwevend venster wordt gemaakt waarin de onderliggende JavaScript-code wordt weergegeven van een geselecteerde scriptmarkering in de ontwerpweergave. De Scripteditor geeft de JavaScript-code weer in het element textarea van een HTML-formulier dat is gedefinieerd in een zwevend venster met de naam scriptlayer. Als u wijzigingen in de geselecteerde code in het zwevende venster aanbrengt, roept de extensie de functie updateScript() aan om uw wijzigingen op te slaan. Als u geen scriptmarkering hebt geselecteerd wanneer u de Scripteditor start, geeft de extensie (no script selected) weer in een zwevend venster met de naam blanklayer.
U maakt deze extensie door zwevende vensters te maken, JavaScript-code te schrijven en een menu-item te maken.
Zwevende vensters maken
Het begin van het HTML-bestand voor deze extensie bevat de standaardgegevens van de documentheader en een title-tag waarmee het woord Script Editor in de titelbalk van de zwevende vensters wordt geplaatst.
De header van het HTML-bestand maken
-
-
Voer het volgende in:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Script Editor</title> <script language="JavaScript">
Met de extensie worden twee zwevende vensters gedefinieerd die (no script selected) weergeven als de gebruiker geen scriptmarkering of de onderliggende JavaScript-code van een geselecteerde scriptmarkering heeft geselecteerd. Met de volgende code worden deze twee zwevende vensters of AP-elementen (Absolutely Positioned) gedefinieerd met de namen blanklayer en scriptlayer:
De twee zwevende vensters maken
-
Voeg de volgende code toe na de header in het HTML-bestand:
<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>
-
Sla het bestand op als scriptEditor.htm in de map Configuration/Floaters.
Beide div-tags gebruiken het kenmerk style om de positie (absolute), grootte (width:422px en height:181px) en de standaardinstelling voor zichtbaarheid (visible) van de zwevende vensters op te geven. Het venster blanklayer gebruikt het kenmerk center en een reeks break-tags (br) om de tekst in het midden van het venster te plaatsen. Het venster scriptlayer maakt een formulier met één textarea om de geselecteerde JavaScript-code weer te geven. De tag textarea geeft ook aan dat, wanneer er een onBlur-gebeurtenis optreedt om aan te geven dat de geselecteerde code is gewijzigd, de functie updateScript () wordt aangeroepen om de gewijzigde tekst weer naar het document te schrijven.
De JavaScript-code schrijven
De JavaScript-code voor de Scripteditor bestaat uit één functie voor zwevende vensters die Dreamweaver aanroept, selectionchanged() en een door de gebruiker gedefinieerde functie, updateScript().
selectionChanged(): is er een scriptmarkering geselecteerd?
De functie SelectionChanged() bepaalt of er een scriptmarkering in de ontwerpweergave is geselecteerd. Er wordt een scriptmarkering in de ontwerpweergave weergegeven als er een JavaScript-routine in de hoofdsectie van een document staat en als Scripts is geselecteerd in de sectie Onzichtbare elementen van het dialoogvenster Voorkeuren. In de volgende afbeelding ziet u een scriptmarkeringspictogram:
De functie selectionChanged() roept eerst de functie dw.getDocumentDOM() aan om het DOM (documentobjectmodel) voor het document van de gebruiker op te halen. Vervolgens wordt de functie getSelectedNode() aangeroepen om eerst te controleren of het geselecteerde knooppunt voor dat document een element is en om vervolgens te controleren of het een SCRIPT-tag is. Als beide voorwaarden waar zijn, maakt de functie selectionChanged() het zwevende venster scripteditor zichtbaar en geeft daarin de onderliggende JavaScript-code weer. De functie stelt ook de eigenschap visibility van het zwevende venster blanklayer in op de waarde hidden. In de volgende afbeelding ziet u het zwevende venster scriptlayer met de geselecteerde JavaScript-code:
Als het geselecteerde knooppunt geen element of geen script-tag is, maakt de functie selectionChanged() het zwevende venster blanklayer zichtbaar en verbergt de functie het venster scriptlayer. In het zwevende venster blanklayer wordt de tekst (no script selected) weergegeven, zoals u in de volgende afbeelding ziet:
De functie selectionChanged() toevoegen
-
Open het bestand scriptEditor.htm in de map Configuration/Floaters.
-
Voer de volgende code in de headersectie van het bestand in.
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'; } } -
Sla het bestand op.
updateScript(): wijzigingen terugschrijven
De functie updateScript() schrijft het geselecteerde script terug wanneer er een onBlur-gebeurtenis in het element textarea van het venster scriptlayer plaatsvindt. Het formulierelement textarea bevat de JavaScript-code en de onBlur-gebeurtenis treedt op wanneer het element textarea de invoerfocus verliest.
-
Open het bestand scriptEditor.htm in de map Configuration/Floaters.
-
Voer de volgende code in de headersectie van het bestand in.
/* 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> -
Sla het bestand op.
Een menu-item maken
Het is niet voldoende om de Scripteditor-code in de map Configuration/Floaters op te slaan. U moet ook de functie dw.setFloaterVisibility('scriptEditor',true) of de functie dw.toggleFloater('scriptEditor') aanroepen om het zwevende venster te laden en zichtbaar te maken. De meest voor de hand liggende plaats van waaruit de Scripteditor kan worden gestart, is het menu Venster dat in het bestand menus.xml is gedefinieerd. U moet de menuitem-tag maken waarmee een item voor de Scripteditor-extensie wordt gemaakt in het menu Venster, zoals in de volgende afbeelding wordt weergegeven:
Als u in de ontwerpweergave een scriptmarkering voor het huidige document selecteert en vervolgens het menu-item Scripteditor selecteert, start Dreamweaver het zwevende venster Scripteditor en geeft Dreamweaver de onderliggende JavaScript-code van de scriptmarkering weer. Als u het menu-item selecteert wanneer er geen scriptmarkering is geselecteerd, geeft Dreamweaver het venster blanklayer weer dat de tekst (no script selected) bevat.
-
Open het bestand menus.xml in de map Configuration/Menus
-
Ga naar de tag die begint met <menuitem name="Tile _Vertically" en plaats de invoegpositie na de afsluitende /> van de tag.
-
Voeg op een nieuwe regel het volgende in:
<menuitem name="Script Editor" enabled="true" ¬ command="dw.toggleFloater('scriptEditor')"¬ checked="dw.getFloaterVisibility('scriptEditor')" /> -
Sla het bestand op.
Adobe MAX
De creativiteitsconferentie
14–16 oktober Miami Beach en online
Adobe MAX
De creativiteitsconferentie
14–16 oktober Miami Beach en online