www-Sharp HTML editor lets you create own designers for every HTML element. This tutorial shows how to create designer for header (H1 - H6) elements.
www-Sharp designer is HTML page that is shown similar way as window.showModelessDialog() when user double-click on HTML element holding ALT button. window.dialogArguments is designing HTML element. Common variables that you can use while manipulating this element are:
Be sure to use elementDocument when working with designing element. Trying insert child element, created with document.createElement(), to designing element can have inpredictable results.
Example "HeaderDesigner" (can be found in Examples folder under directory where www-Sharp is installed) shows source for HeaderDesigner. As you can see, in body.onload handler designer controls are initialized. Then user can change them. And when user press OK or Apply button, changes are passed to designing element.
When designer page is ready you should register designer in www-Sharp. To do this, choose "View\Properties" in application menu and select "User interface\HTML Editor" settings. Choose "Designers" tab. Press "Add designer" button and enter "H1" into Tag column. Choose handler column and press "..." button. In dialog enter "www-sharp://www-Sharp.Examples/HeaderDesigner/header.html" into URL (www-Sharp registers "www-sharp://www-Sharp.Examples/" domain for Exmaples folder) and "dialogHeight=250pt;dialogWidth=350pt;resizable:yes;help:no" into Options (options are the same as for window.showModelessDialog()). You can optionally specify class name for which this handler is, empty class name means default handler for elements with specified tag name. Repeat this operation for H2, H3, H4. H5 and H6 tags.
Now when you double-click on header holding ALT in www-Sharp HTML designer (designer mode) you will see this designer.
P.S. Double-clicking on element holding SHIFT, CTRL or SHIFT+CTRL are also functional.