Author Topic: HTML Tools: example of script plugin for editing HTML  (Read 3314 times)

Offline alex

  • Developer
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2169
  • Karma: +37/-3
    • View Profile
    • HippoEDIT
HTML Tools: example of script plugin for editing HTML
« on: February 24, 2012, 08:34:39 pm »
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
  1. var nIconLink = Application.RegisterIconString(
  2. 'R0lGODlhEAAQALMAAFVVVcLCwpmZmX5+fu/v79fX12lpaWZmZoyMjOTk5KKiovT09MzMzN3d3f// \
  3. /wAAACH5BAEHAA4ALAAAAAAQABAAAARM0MlJq704680nU6DCSF84BsKiLkKArmyAEAgihKFQ00Mz \
  4. OIgFYUhYIBy9gYFhaB6e0ObSoDgUEonCAWTFahUOAWAMEEjEZHNnzW5bIgA7'
  5. );
  6.  
  7. Application.AddScriptInfo("HTML Tools", "1.0.0.0", "HTML Tools for HippoEDIT", "HippoEDIT", "[email protected]", "http://www.hippoedit.com");
  8.  
  9. function onInsertLink()
  10. {
  11.         var dialog_template =
  12.         '@<dialog title="Insert Link" resizing="horizontal" modal="false" id="insert_link"> \
  13.            <image> \
  14.                 R0lGODlhMAAwALMAALm5ub29veXl5czMzO7u7tjY2MbGxvb29tzc3P///wAAAAAAAAAAAAAAAAAA \
  15.                 AAAAACH5BAEHAAkALAAAAAAwADAAAAT/MMlJq7046827/1phAEFxgOhFBEDbBkQqJ6trwzNYt0Zx \
  16.                 xznODlCQCH5BzbA4ObpwScvS4nydopPppQoYYCVaDPcbzvha2LLZhR21mJuqN1mFa7jA4OBFEYht \
  17.                 flF7JBM+BlSAX4OHCWcAgUaJX0eMjgF9kl8JCBKWeVyQmp1Pn5k5BHmFpE2mKQcFLCSQngkCBm4t \
  18.                 oSkCsS6Vq1y5QcEAvy8xBDbCOVwDCHO0RgMBAybDNnbRorXYFNqiXHYIwLp03RTAxZrhiDhVV+Yu \
  19.                 dhR5jqkz7ByDAFEHvfMYHM0J4gjgBUcA7slww2gDwnIyfHF4+AUXRFUuLsqgeLBVEn8eJ0Fto9Hr \
  20.                 EaaMI8GUDCQypUps+0y6zFLSo8shKGdK2TdAoc6fQFNEAAA7 \
  21.            </image> \
  22.            <columnbreak/> \
  23.            <group> \
  24.                    <paragraph text="Path:" minwidth="6" style="required" align="left"/> \
  25.                    <edit id="url" cuebanner="Enter here url (required)" autocomplete="url" minwidth="25" required="true"/> \
  26.                    <file_browser filter="All files (*.*)|*.*|HTML Files (*.html)|*.html||" align="right"/> \
  27.            </group> \
  28.            <group> \
  29.                    <paragraph text="Title:" minwidth="6" align="left"/> \
  30.                    <edit id="title" cuebanner="Enter here title" minwidth="25"/> \
  31.            </group> \
  32.            <group uniform="true" align="right|bottom"> \
  33.                    <button title="&amp;OK" returnval="ok" default="true"/> \
  34.                    <button title="&amp;Cancel" returnval="cancel"/> \
  35.            </group> \
  36.         </dialog>@';
  37.        
  38.         var varStorage = CreateStorage();
  39.  
  40.         var sel     = ActiveView.Selection;
  41.         var selText = ActiveDocument.GetText(sel);
  42.         varStorage.write("title", selText);
  43.  
  44.         if ( dialog(dialog_template, varStorage) != 0  )
  45.         {
  46.                 var linkPattern = "<a href=\"" + varStorage.read("url") + "\">" + varStorage.read("title") + "</a>";  
  47.                 ActiveDocument.ReplaceText(sel, linkPattern, HE_ACTION_UNKNOWN);       
  48.         }      
  49. }
  50.  
  51. var vInsertLinkCMD = Application.CreateCommand("HTML.InsertLink", "Insert Link...", "Interactively insert link element into HTML code", nIconLink, onInsertLink);
  52. Application.RegisterCommand(vInsertLinkCMD);
  53.  
  54. ////////////////////////////////////////////////////////////////////////
  55. // Initialize HTML Toolbar
  56. Application.onInitToolbars = function (){
  57.         var MyToolbar = this.GetToolBar("HTML", true);
  58.         MyToolbar.Name = "HTML Tools";
  59.         MyToolbar.AddButton(vInsertLinkCMD);
  60. }
  61.  
  62. ////////////////////////////////////////////////////////////////////////
  63. // Create new main Menu for HTML
  64. Application.onInitMainMenu = function (bUpdate){
  65.         if ( bUpdate == false )
  66.         {
  67.                 var menuHTML = this.InsertSubMenu(this.ItemCount - 4, "HTM&L");
  68.                 if ( menuHTML != null )
  69.                 {
  70.                         menuHTML.AddItem("", vInsertLinkCMD);
  71.                 }
  72.         }
  73. }

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:


And this will be a result:
* html_tools.hejs (3.02 kB - downloaded 419 times.)

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.

Offline alex

  • Developer
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2169
  • Karma: +37/-3
    • View Profile
    • HippoEDIT
Re: HTML Tools: example of script plugin for editing HTML
« Reply #1 on: March 14, 2012, 09:20:08 pm »
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:

Offline scunliffe

  • Registered User
  • Newbie
  • *
  • Posts: 15
  • Karma: +0/-0
    • View Profile
Re: HTML Tools: example of script plugin for editing HTML
« Reply #2 on: September 06, 2012, 06:44:00 pm »
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! :-)




Offline alex

  • Developer
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2169
  • Karma: +37/-3
    • View Profile
    • HippoEDIT
Re: HTML Tools: example of script plugin for editing HTML
« Reply #3 on: September 06, 2012, 11:52:32 pm »
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.

 

Related Topics

  Subject / Started by Replies Last post
HTML

Started by alex Syntax Files

0 Replies
3320 Views
Last post October 26, 2009, 12:53:32 am
by alex
1 Replies
1453 Views
Last post May 10, 2010, 01:32:40 pm
by alex
1 Replies
1627 Views
Last post February 25, 2011, 01:29:53 am
by alex
html bar

Started by flamerz Bug reports

1 Replies
2247 Views
Last post March 23, 2011, 11:18:47 pm
by alex
2 Replies
521 Views
Last post February 04, 2017, 07:30:59 am
by HippoKondriaq