Paulis software ->Vedit resources -> HTML Tools 27. 04. 2009  
-----------

HTML Tools

Collection of Vedit macros and other resources for HTML editing.

This is a collection of HTML tools I have made for Vedit text editor. From a special HTML tools-menu, you can easily run the macros included. In addition, the package contains keyboard configuration and syntax highlighting files for HTML. See below for the descriptions of each file.

This package requires Vedit 6.02 or later. If you have an older version of Vedit, see version 1.0 of the package.

For easy download, all the macros and other files are packed in the file HTMLtool.zip. Click the link below to download the package.

Download HTMLtool21.zip   -   V2.1   -   26.04.2009   -   28 K - Vedit 6.1

Descriptions of the files in HTMLtool.zip:


Matching tag Delete tag Anchor Format Justify CR to BR List Form href IMG Table New Check HTML menu

HTML Menu

HTML.MNU is a Tools menu for HTML.
You can use this menu to insert some of the most common HTML tags and to do some edit operations. In addition, it allows you to easily call the macros listed below.

The following items in the HTML menu are inline commands in the menu:

Delete text - (see below)
Center - Insert <center> </center> tag pair.
Non break space - Insert &nbsp; entity.
line Break - Insert <br> tag.
Paragraph - Insert <p> </p> tag pair.
other tag - Insert any tag pair (enter the name in dialog box).
Anchor - Insert anchor (link target).
table Row - Insert <tr> tag.
table Cell - Insert <td> tag.

The other items call a macro. Click on the specific item in the menu to see the description. ->

In addition, the package contains macro html_editor_set.vdm which is not in the menu.

Tip: CONFIG.VDM macro, downloadable from misc macros section, loads this menu when you select "html" configuration. On Vedit 6.1 or later, if you enable "Restore full project on open", the menu will be automatically loaded when you open the project.


Keyboard configuration

HTML1.KEY is keyboard configuration file modified from HTML.KEY that came with Vedit. The main difference is that it contains some shortcut keys to the HTML menu. Some of the menu commands replace the inline commands in html.key. This has the advantage that you can see the keyboard shortcut in the HTML menu. Other keys execute some tools function in the html.mnu. In addition, the macro in T-Reg 119 that inserts HTML tags has been improved.

HTML2.KEY contains the same modifications as HTML1.KEY, plus some other changes I personally prefer. These include changes in Redo, copy/paste etc. functions that have multiple keys configured. Further, my special search forward/backward functions have been implemented in the Numpad+ and Numpad- keys (see C.KEY), as well as calls to markers.vdm and t_reg.vdm macros in the USER2.MNU.

The text file html2key.txt (also included in the package) describes the differences of html.key, html1.key and html2.key.

Syntax file

HTML2.SYN is a color syntax highlight file modified from HTML.SYN that came with Vedit. The difference is that html comments are highlighted, and '&' has been added to the list of symbols.

Macros

Matching Tag

HTML_tag.vdm macro searches matching tag. If cursor is located at an opening tag, it is moved to the matching closing tag, and vice versa. Nested tags are handled, too. If no matching tag was found, a message is displayed on status line. If the cursor is not on a tag, the macro searches forward for next tag.
This macro is run when you select "Matching tag" from the HTML menu.

Delete Tag,  Delete Text

HTML_del.vdm macro deletes the tag on which the cursor is located. If the tag has a matching pair, that is deleted, too.
This macro is run when you select "Delete tag" from the HTML menu, or press Alt-Del key (in HTML*.KEY keyboard configuration).

Delete text option in the HTML menu is an inline macro in the menu. Selecting this option deletes all text between double quotes or between two html tags within one line. The keyboard shortcut in HTML*.KEY is Ctr-Del.

Go to Anchor

HTML_a.vdm provides point-and-shoot anchor selection. A window opens displaying list of all the anchors in the current HTML file. You can use cursor keys to select one of the anchors, then press Enter to go to that location in the file (or press Esc to cancel).
This macro is run when you select "Goto anchor" from the HTML menu.

Format Character

HTML_fmt.vdm macro opens a dialog box, from where you can select one of the following character format options:
Bold, Italics, Strong, EM (emphasize), Code, TT (teletype), Small, Big, Font, Span.
If you select "Font", another dialog box opens for selecting font family, size and color.
If you select "Span", the parameter "class" is included for formatting with CSS.
The selected format option is then inserted in the file. If a block is selected, the the tags are inserted around the block.
This macro is run when you select "Format character" from the HTML menu.

Requires Vedit 6.0 or later.

Justify/align dialog box

Justify/Align a section

HTML_jst.vdm macro allows you to specify formatting of a block level element.
A dialog box opens, from where you can choose the align option for the section: none, left, right, center or justify. (If 'none' is selected, no align parameter is inserted.) In addition, you can enter a name of CSS class to be used for formatting the section. (If you leave the class text box empty, no class parameter is inserted).
If the cursor is inside a block level tag (<P>, <Hx>, <div> etc.), the formatting parameters are added or updated in this tag. Otherwise a <div>, <p> or <pre> tag is inserted, as selected from the dialog.
This macro is run when you select "Justify..." from the HTML menu.

Requires Vedit 6.0 or later.
New V2.2: Option to choose which tag to insert. Update existing parameters in existing tag.


Convert CR to <br>

HTML_BR.vdm is a simple macro that converts newlines into <br> tags. Use this macro when converting text files into HTML, if you want to preserve the line breaks.
If a block is selected, all the lines in the block are converted. If no block is selected, the current line is converted and cursor is moved to the next line.
This macro is run when you select "Convert CR to <br>" from the HTML menu.

Insert List

Insert List dialog box

HTML_lst.vdm macro inserts list tags in the file. If a block of text is highlighted, the selected lines are converted into list elements, otherwise an empty list is inserted.
The macro opens a dialog box, from where you can select one of the four list types:
Bullet list, Numbered list, Directory list or Definition list.
This macro is run when you select "List..." from the HTML menu.

Requires Vedit 5.20 or later.


Insert Form element

HTML_form.vdm macro is used to insert form element tags in the html file.
A dialog box opens for choosing one of the elements Form, Input, Select or Textarea.
If Input element is selected, another dialog box opens, from where you can select one of Text input, Checkbox, Radio button, Button, File upload, Submit button, Reset button or hidden field. The element is then inserted, with default name, size etc. parameters. You can then edit these parameters in the html file to suit your purposes.
If a block is highlighted and form element is selected, the tags are inserted before and after this block.
This macro is run when you select "Form..." from the HTML menu.

New V2.1: Option to convert highlighted block. Added File and Hidden fields. Checkbox element fixed.

Insert link (HREF)

HREF.vdm inserts a link (<A HREF=...>) at current cursor location. The macro opens a dialog box for inserting the URL and link text. If a block is highlighted, the highlighted text will be used as link text. Pressing the Browse button allows you to select the linked file using file open dialog box.
This macro is run when you select "HREF (link)"" from the HTML menu.

New macro (previously was inline code in HTML menu). Use dialog box.

Insert picture

HTML_img.vdm macro inserts a picture (IMG tag) at current cursor location. The macro opens the File Open dialog box for selecting the file. After you have selected the image, the tag is inserted in the html file. The macro automatically reads the picture dimensions (height, width) from the image file and inserts them in the tag (supports GIF, JPG and PNG files). The file path is converted to Internet format (relative path, \'s converted into /'s). The cursor is positioned at alt="" parameter for easy insertion of the alt text.

If the cursor is already inside an IMG tag, the macro only adds or updates the image dimensions. In this case no dialog box is shown.

This macro is run when you select "IMG SRC (picture)" from the HTML menu.

New V2.4: Update existing width/height, add alt parameter if missing, skip EXIF thumbnails in JPG, allow spaces in filenames.

Create a Table

HTML_tbl.vdm creates a html table element. If there is no block highlighted, an empty <table> element with a single row and column is inserted. You can then add <tr> and <td> elements (using the options in the HTML menu).
If a block is highlighted, each line in the block will be converted into one table row. A dialog box opens, where you can choose the table column separator (such as comma or Tab character).

This macro is run when you select "Table..." from the HTML menu.
Select "table Row" to insert <tr> tag, and "table Cell" to insert <td> tag.

Document template dialog box

New HTML document   (Document Template)

HTML_new.vdm is run when you select "New HTML document" in the HTML menu. With this macro, you can create a new HTML document template in an empty buffer, add HTML document level marking in a text file, or update the marking in an existing HTML file.

The macro inserts the document-level tags Doctype, html, head, title and body, and a link to stylesheet file if selected. If your document already has these tags, the macro just updates the tags (e.g. the filename for the background image) and inserts any missing tags.

The macro opens a dialog box that allows you to enter document title, to select a CSS (stylesheet) file, to define the text colors and to insert a background image. Any existing tags in your file are used to set the default values in the dialog. Click [Select CSS] or [Select Image] button to select a CSS file or background image using file open dialog box. The file path is automatically converted to html format (relative path, '/' characters instead of '\'). If you choose to define colors, the color tags are inserted with default color values. You can then edit these values in the html file to change the colors. (Note that you can specify the colors and background image in the CSS file, too, in which case you do not need to specify them in the HTML code.)

New V2.1: Buttons to select CSS file, 'no change' option for doctype, relative path.
---

Check HTML syntax

HTML_chk.vdm checks a HTML document for syntax errors. The macro performs the following checks:

If an error is found, displays a dialog box that allows you either to skip the error, or to exit checking and edit the file. In the latter case, the cursor is positioned at the error location.

New V2.3: In entity check, if & followed by separator, not error

Set Vedit as HTML editor for Internet Explorer

html_editor_set.vdm macro can be used to add Vedit in the list of HTML editors for Internet Explorer. On IE7, you can additionally set Vedit to be used as HTML source viewer.

A dialog box opens for confirmation.
- Check the tickboxes to select if you want to set Vedit as HTML editor or as Source viewer or both.
- If the setting has already been done, the corresponding tickbox is ticked by default. To remove Vedit from the setting, uncheck the tickbox and click OK.

On IE5, you can then configure Vedit to be the default HTML editor by selecting:
"Tools" -> "Internet Options" -> "Programs" tab -> "HTML editor",
and select Vedit from the list box.

On IE7, the default HTML editor is launched by clicking the "Page" button on the Command Bar, then select "Edit with Vedit".
To use Vedit as source code viewer, select "View" -> "Source".

Note: when viewing source of a page in Internet, IE may store the local copy of the page without .htm extension. In this case, the color syntax highlighting will not work automatically. Use Edit HTML to view the page with syntax colors.

Note: the call for this macro is not included in the HTML menu, since you probably only need to run it once.

New V2.0: Set as source code viewer on IE7. Option to remove the settings.

See also: