A simple floating panel example

In this example, you create a Script Editor extension that creates a floating panel to display the JavaScript code that underlies a selected script marker in Design view. The Script Editor displays the JavaScript code in the textarea element of an HTML form that is defined in a floating panel called scriptlayer. If you make changes to the selected code in the floating panel, the extension calls the updateScript() function to save your changes. If you have not selected a script marker when you invoke the Script Editor, the extension displays (no script selected) in a floating panel called blanklayer.

You create this extension by performing the following steps:

• Creating the floating panels
• Writing the JavaScript code
• Creating a menu item