HTML Tools: example of script plugin for editing HTML

[alex]

This example shows how to extend HippoEDIT with syntax specific functionality. Explicitly create small helpers for HTML editing, and call/access with shortcut, with toolbar button and menu.
More detailed description about api and scripting syntax can be found here and here. In this topic just an example.

Code (javascript) Select Expand

var nIconLink = Application.RegisterIconString(
'R0lGODlhEAAQALMAAFVVVcLCwpmZmX5+fu/v79fX12lpaWZmZoyMjOTk5KKiovT09MzMzN3d3f// \
/wAAACH5BAEHAA4ALAAAAAAQABAAAARM0MlJq704680nU6DCSF84BsKiLkKArmyAEAgihKFQ00Mz \
OIgFYUhYIBy9gYFhaB6e0ObSoDgUEonCAWTFahUOAWAMEEjEZHNnzW5bIgA7'
);

Application.AddScriptInfo("HTML Tools", "1.0.0.0", "HTML Tools for HippoEDIT", "HippoEDIT", "supportbox@hippoedit.com", "http://www.hippoedit.com");

function onInsertLink()
{
var dialog_template =
'@<dialog title="Insert Link" resizing="horizontal" modal="false" id="insert_link"> \
   <image> \
R0lGODlhMAAwALMAALm5ub29veXl5czMzO7u7tjY2MbGxvb29tzc3P///wAAAAAAAAAAAAAAAAAA \
AAAAACH5BAEHAAkALAAAAAAwADAAAAT/MMlJq7046827/1phAEFxgOhFBEDbBkQqJ6trwzNYt0Zx \
xznODlCQCH5BzbA4ObpwScvS4nydopPppQoYYCVaDPcbzvha2LLZhR21mJuqN1mFa7jA4OBFEYht \
flF7JBM+BlSAX4OHCWcAgUaJX0eMjgF9kl8JCBKWeVyQmp1Pn5k5BHmFpE2mKQcFLCSQngkCBm4t \
oSkCsS6Vq1y5QcEAvy8xBDbCOVwDCHO0RgMBAybDNnbRorXYFNqiXHYIwLp03RTAxZrhiDhVV+Yu \
dhR5jqkz7ByDAFEHvfMYHM0J4gjgBUcA7slww2gDwnIyfHF4+AUXRFUuLsqgeLBVEn8eJ0Fto9Hr \
EaaMI8GUDCQypUps+0y6zFLSo8shKGdK2TdAoc6fQFNEAAA7 \
   </image> \
   <columnbreak/> \
   <group> \
   <paragraph text="Path:" minwidth="6" style="required" align="left"/> \
       <edit id="url" cuebanner="Enter here url (required)" autocomplete="url" minwidth="25" required="true"/> \
       <file_browser filter="All files (*.*)|*.*|HTML Files (*.html)|*.html||" align="right"/> \
   </group> \
   <group> \
   <paragraph text="Title:" minwidth="6" align="left"/> \
       <edit id="title" cuebanner="Enter here title" minwidth="25"/> \
   </group> \
   <group uniform="true" align="right|bottom"> \
   <button title="&amp;OK" returnval="ok" default="true"/> \
   <button title="&amp;Cancel" returnval="cancel"/> \
   </group> \
</dialog>@';

var varStorage = CreateStorage();

var sel     = ActiveView.Selection;
var selText = ActiveDocument.GetText(sel);
varStorage.write("title", selText);

if ( dialog(dialog_template, varStorage) != 0  )
{
var linkPattern = "<a href=\"" + varStorage.read("url") + "\">" + varStorage.read("title") + "</a>";   
ActiveDocument.ReplaceText(sel, linkPattern, HE_ACTION_UNKNOWN);
}
}

var vInsertLinkCMD = Application.CreateCommand("HTML.InsertLink", "Insert Link...", "Interactively insert link element into HTML code", nIconLink, onInsertLink);
Application.RegisterCommand(vInsertLinkCMD);

////////////////////////////////////////////////////////////////////////
// Initialize HTML Toolbar
Application.onInitToolbars = function (){
var MyToolbar = this.GetToolBar("HTML", true);
MyToolbar.Name = "HTML Tools";
MyToolbar.AddButton(vInsertLinkCMD);
}

////////////////////////////////////////////////////////////////////////
// Create new main Menu for HTML
Application.onInitMainMenu = function (bUpdate){
if ( bUpdate == false )
{
var menuHTML = this.InsertSubMenu(this.ItemCount - 4, "HTM&L");
if ( menuHTML != null )
{
menuHTML.AddItem("", vInsertLinkCMD);
}
}
}

For you convenience I have also attached plug-in file.  Just drop it somewhere and than Tools->Execute... After successful execution you should see new menu, toolbar button and command.
Something like this:
[attachimg=2]

And this will be a result:
[attachimg=3]

Plugin is always reloaded on start-up after execution (using file you point). To disable it, go to Tools->Options->Plugins and uncheck.
To reinitialize, just once more Execute.

[alex]

I have extended HTML Tools script adding new commands and some optimizations.
Not all stuff is ready, but here I hope for some feedback and help of community Especially HTML developers.

New screenshots:
[attachimg=1]

[scunliffe]

Hi Alex,

I only just noticed that HippoEdit had been updated to handle these scripts and I'm "over the moon" excited about it!

I grabbed your HTML tools and tried them out... and as such here is my feedback ;-)

1.) Personally whenever I'm making an HTML Table, it would be beneficial to include some default cellpadding/cellspacing/border/width attributes and to also create an initial TR, and TD.  (I realize that some of the attributes can be styled using CSS... but the child elements are almost always needed) like an OL or UL element with an initial "LI"

2.) I'm not sure if it is possible, but if I start with no selection... and I insert new content like a bold tag, I would prefer if the cursor is left inside the tag vs. after the closing tag.  The exception to this would be for self-closing tags like a br tag, where after would make more sense.

That all said I love this new scriptability... and I will be making tons of scripts tonite! :-)

[alex]

Hi Steve,

the purpose of the scripting support and scripts itself for me, that user can modify/extend the logic how he wants by himself
But OK, this example just not jet complete, I have not time to finish it. Will come with some time, or maybe somebody will help here

Basically,  I have checked by my copy, and see that with it already works as you want.
For table, I planned exactly what you want but have not done it yet. It needs a little bit more time as other small commands.

I have attached update version of the script. Can happen that it will give error - i have renamed one function in API. So if does not work or wait for new beta (next days) or modify script to work.