Using the tiny HTML Tools

Formatting  Lists  Conversion to List or Table  Links and Images  Keyboard Shortcuts

Formatting

Surround the selected text with formatting-tags such as <strong> (bold), <em> (italic), <u> (underline), <p> (paragraph) or the headline-tags <h1>, <h2> or <h3>.

To do this, select the text to be formatted in a text-editor, right-click and select the desired action from the 'tiny HTML Tools' submenu as displayed below. Alternatively, use the shortcuts as assigned in the usual Preferences-page (Window > Preferences, and then Workbench > Keys) or the menu 'tiny HTML Tools' appearing in the menu-bar if the text-editor is active.

Lists

Surround the selected text with list-tags such as <ul> (bullet list), <ol> (numbered list) or <li> (list entry).

To do this, select the text to be formatted in a text-editor, right-click and select the desired action from the 'tiny HTML Tools' submenu as displayed below. Alternatively, use the shortcuts as assigned in the usual Preferences-page (Window > Preferences, and then Workbench > Keys).

The context-menu

Conversion to List or Table

Sometimes you copy & paste from a source like Word or plain text and want to convert the clipboard contents to something HTML-formatted.

Conversion to lists

In case you are looking at a list, the Plug-in offers the menu-entry 'Convert to List'. To use this, select the text to be converted and then the menu-entry. The action tries to derive from the selection whether you will want a numbered- or a bullet-list by the following rule:

If the first line of the selection starts with a digit, followed by a point and a TAB, the list is assumed to be numbered.

If the first line of the selection starts with anything but a digit, followed by a TAB, the list is assumed to be a bullet-list.

The selection is surrounded with the corresponding list-tags, each line in the selection is converted to a list-entry where any characters perceived to be formatting-characters (leading digits if applicable, an arbitrary character and a following TAB) are dropped.

Thus, the following text:

. A Line
. Another line

would be converted to the following list:

Similarly, the text

1. A numbered list, first line
2. A numbered list, second line

is converted to

  1. A numbered list, first line
  2. A numbered list, second line

Conversion to tables

In case you are looking at a table, you can use the menu-entry 'Convert to Table'. Select the text to be converted and then the menu-entry (or the shortcut). The action derives the structure of the table using the rule:

Thus the following text

this should be a table with two cells
in two rows

is converted to

this should be a tablewith two cells
intwo rows

Links and Images

Capturing a screenshot or another image from the clipboard as local file and creating an image-reference

It is very common that you want to include screenshots or images copied from some other source via the clipboard in your HTML. Usually you would paste the clipboard-contents in some image-editor, save it, and then create a link.

In case you do not want to change the image or screenshot, but only want to reference it from your file, use the 'Image Link From Clipboard' menu-entry in the 'tiny HTML Tools' menu.

The action detects whether there are any image-contents on the system-clipboard. If this is the case, the dialog below opens, asking you to select a path to and a name for the image-file to be saved (the image is saved as 'png'-file). After you choose a path and a name and close the dialog using the 'OK'-button, an <img>-element will be generated with the src-attribute being the relative path to the file just created and the selection (if any) being the ALT-text.

In case the file already exists, a dialog lets you choose whether to cancel or to overwrite the existing contents.

The Image-file-selection dialog

Insert a link to a project-local resource as image

For images, select the text to be converted to the image-ALT-text, right-click and select 'Image'. The dialog displayed below will open, displaying all project-files with extensions 'gif', 'jpeg', 'jpg', or 'png' and matching the name-filter you enter. Select a file and click 'Ok'. The selected text will be the ALT-text, the image-address be relative to the current file's directory.

Selection dialog for images

Insert a link to a project-local resource as href

For links, select the text to be converted to a link to a project-resource, right-click and select 'Local Link (Href)'. The dialog displayed below will open, displaying all project-files matching the name-filter you enter. Select a file and click 'Ok'. The selected text will be the Href-text, the link will be relative to the current file's directory.

Selection dialog for links

Keyboard-shortcuts

All actions are accessible via keyboard-shortcuts as well. These can be configured using the Eclipse-Menu 'Window > Preferences' under the section 'Workbench > Keys' where a category 'tiny HTML Tools' should be available. By default, the key-assignments are as follows: