5. The XHTML toolbar

The XHTML tool bar starts with a number of “text style” toggles. These toggles emulate the behavior of the Bold, Italic, Underline, etc, toggles found in the tool bars of almost all word-processors. More information about text style toggles in About “text style” toggles in XMLmind XML Editor - Online Help.

Figure 1. Toggles found at the beginning of the XHTML tool bar
Toggles found at the beginning of the XHTML tool bar

In the above screenshot, the caret is inside an i element and the user clicked the arrow button next to a “italic text style” toggle.

Toggle i

“Toggle” element i. Next to this toggle is found an arrow button displaying a menu containing additional checkboxes for the following elements: em, dfn, cite.

Toggle b

“Toggle” element b. Next to this toggle is found an arrow button displaying a menu containing additional checkboxes for the following elements: strong, abbr.

Toggle tt

“Toggle” element tt. Next to this toggle is found an arrow button displaying a menu containing additional checkboxes for the following elements: code, var, kdb, samp.

Change case

Displays a menu letting the user change the character case of selected text. If a single node is selected, this converts the character case of all the text contained in this node. If there is no selection of any kind, this converts the character case from caret position to end of word, then it moves the caret to the next word.

lowercase

All characters are converted to lowercase characters. Keyboard shortcut: Esc+l.

UPPERCASE

All characters are converted to uppercase characters. Keyboard shortcut: Esc+u.

Capitalize Each Word

First character of a word is converted to an uppercase character. The other characters are converted to lowercase characters.Keyboard shortcut: Esc+c.

Convert to plain text

Convert implicit or explicit selection to plain text.

Add link

Converts the selection, if any, to a link; simply inserts an empty link at caret position otherwise. A link is an a element having an href attribute.

Set ID

This button displays a menu having 2 entries: Set ID and List Anchors and Links.

The List Anchors and Links menu entry displays a dialog box letting the user search and select anchors (that is, any element having an ID) and links. Its Copy button copies selected ID or link target to the clipboard.

Decrease nesting level

Convert a paragraph to a list item and a list item to a paragraph, the new element having a lesser nesting level than the original one. This button automatically splits lists when needed to.

This is the inverse command of "Increase nesting level". More Information below.

Increase nesting level

Convert a paragraph to a list item and a list item to a paragraph, the new element having a greater nesting level than the original one. This button automatically creates lists or merges adjacent lists when needed to.

Note that the two above buttons strictly alternate between paragraphs and list items. This means that you'll often have to click a button twice in a row. For example, in order to create a nested list, first click anywhere inside a list item and then click "Increase nesting level" twice. First click converts the list item to a plain paragraph contained in the preceding list item. Second click converts this paragraph to the first item of a new nested list.

For the two above buttons to function, any of the following conditions should be met:

  • A sequence of list items must be explicitly selected.

  • A list must be explicitly selected. This is equivalent to selecting all its items.

  • A sequence of blocks starting with a paragraph must be explicitly selected.

  • A paragraph must be implicitly selected. In order to implicitly select a paragraph, suffice to click anywhere inside it. However if this paragraph is the first child of a list item, then it's the list item which is implicitly selected.

  • A list item to be implicitly selected. In order to implicitly select a list item, suffice to click anywhere inside it.

[Tip]

When a paragraph is to be converted to a new list using this "Increase nesting level" button, there is a quick and simple way to specify the kind of list to be created:

  • If the paragraph is empty, simply type "*", "-", "1.", "a.", "A.", "i.", "I.", optionally followed by space characters, in it.

  • If the paragraph is not empty, type "*", "-", "1.", "a.", "A.", "i.", "I.", followed by at least one space character, at the very beginning of it.

These “prefixes” are used to create respectively: ul, ul, ol, ol[lower-alpha], ol[upper-alpha], ol[lower-roman], ol[upper-roman], as if the "Change list type" button below was automatically used.

Change list type

Displays a popup menu allowing to change the type of the current list.

The list must be explicitly or implicitly selected. In order to implicitly select a list, suffice to click anywhere inside it.

Add list

Displays a menu allowing to select a type of list (ul, ol, dl). The chosen list is added after node selection or after caret at a location where it is valid to do so.

Add p

Add a p element after node selection or after caret at a location where it is valid to do so.

Add li or dt+dd

Add a li element or a dt/dd pair after current list item. For this command to work, suffice to click anywhere inside an ul, ol or dl element.

Add pre

Add an pre element after node selection or after caret at a location where it is valid to do so.

Menu entry "Normalize Whitespace" normalizes whitespace in implicitly or explicitly selected pre element. Normalizing whitespace means: expanding tab characters to a number of space characters and removing the space characters which are common to the beginning of all text lines (that is, removing the superfluous “indentation” in the pre element, if any).

Add img

Displays a menu letting the user:

  • insert an img element at caret position;

  • OR add a div element containing an img or a figure element containing an img (XHTML 5 only) after node selection or after caret at a location where it is valid to do so;

  • OR add a div element containing an img and a map after node selection or after caret at a location where it is valid to do so.

    After using this "img+map" menu item, right-click anywhere inside the newly inserted map element and select "Edit Image Map" from the contextual popup menu to display an image map editor. This image map editor allows to add “hot areas” to your image. More information in Section 17, “The "Edit Image Map" dialog box” in XMLmind XML Editor - Online Help.

Add MathML equation

(XHTML 5 only.) Displays a menu letting the user add various kinds of MathML equations after node selection or after caret at a location where it is valid to do so.

Insert media object

(XHTML 5 only.) This toolbar button is present only when an XHTML 5 document is opened. Displays a menu letting the user insert a media element at caret position.

audio

XHTML 5 audio element allowing to add audio to your document. More information in Section 16, “The media player dialog box” in XMLmind XML Editor - Online Help.

video

XHTML 5 video element allowing to add video to your document. More information in Section 16, “The media player dialog box” in XMLmind XML Editor - Online Help.

iframe(youtube)

An iframe element showing a sample YouTube video. More information in Section 5.2, “The iframe editor dialog box”.

Add heading

Displays a menu which allows to add an h1, h2, h3, etc, element after node selection or after caret at a location where it is valid to do so.

Add section

(XHTML 5 only.) Displays a menu which allows to add a section, aside, article, header or footer element after node selection or after caret at a location where it is valid to do so.

Add table

Displays a menu which allows to add several styles of tables after node selection or after caret at a location where it is valid to do so.

Table editor

See Section 5.1, “Table editor”.