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”.

5.1. Table editor

The following table editing commands fully support HTML tables. Most table editing commands can be repeated by using EditRepeat (Ctrl+A).

ButtonMenu itemDescription

Table column

For a command in this menu to work, click anywhere inside a cell (or explicitly select a cell or an element having a cell ancestor).

Insert BeforeInsert a column before column containing specified cell.
Insert AfterInsert a column after column containing specified cell.
CutCut to the clipboard the column containing specified cell.
CopyCopy to the clipboard the column containing specified cell.
Paste BeforePaste copied or cut column before column containing specified cell.
Paste AfterPaste copied or cut column after column containing specified cell.
DeleteDelete the column containing specified cell.
Sort Rows

Sort all the rows of the table according to the string values of the cells of the “selected column”. (The “selected column” is the column containing specified cell.)

A dialog box is displayed allowing to specify the following sort options:

Order

Dictionary is the language-specific alphabetical order. Example: (Charles, best, Albert) is sorted as (Albert, best, Charles).

Numeric. The string value of a cell is expected to start with a number. Example: (+15.0%, 1.50%, -20%) is sorted as (-20%, 1.50%, +15.0%).

Lexicographic is the order of Unicode characters. Example: (Charles, best, Albert) is sorted as (Albert, Charles, best).

Dictionary and Numeric orders will cause this menu item to fail, unless the language of the table can be determined (i.e. lookup for the lang or xml:lang attribute).

Direction

Ascending means: A to Z, low to high. Descending means: Z to A, high to low.

Note that:

  • Header/footer rows (i.e. thead) are never sorted.

  • The contents of row groups (i.e. tbody) are sorted separately.

Table row

For a command in this menu to work, click anywhere inside a cell (or explicitly select a cell or an element having a cell ancestor) or explicitly select a row.

Insert Before

Insert a row before row containing specified cell.

[Note]

Note that row editing commands are enabled, not only by implicitly or explicitly selecting a table cell or any of its descendants, but also by explicitly selecting a table row.

Insert AfterInsert a row before row containing specified cell.
CutCut to the clipboard the row containing specified cell.
CopyCopy to the clipboard the row containing specified cell.
Paste BeforePaste copied or cut row before row containing specified cell.
Paste AfterPaste copied or cut row after row containing specified cell.
DeleteDelete the row containing specified cell.

Table cell

For a command in this menu to work, click anywhere inside a cell (or explicitly select a cell or an element having a cell ancestor).

Increment Column SpanIncrement the number of columns spanned by specified cell.
Decrement Column SpanDecrement the number of columns spanned by specified cell.
Increment Row SpanIncrement the number of rows spanned by specified cell.
Decrement Row SpanDecrement the number of rows spanned by specified cell.
Set Color (XHTML 1.0 and 1.1 configurations)

Displays a dialog box allowing to give a background color to specified cell.

[Note]

Unlike the other entries of this menu, this entry allows to give a background color, not only to specified cell, but also to one or more of any of the following explicitly selected elements: table, colgroup, col, thead, tfoot, tbody, tr, td, th.

Format (XHTML 5 configuration)

Displays a dialog box allowing to format specified cell. This dialog box makes it easy and safe setting the style attribute of specified cell to one or more of the following CSS properties: text-align, vertical-align, background-color, border-style, border-width, border-color.

[Note]

Unlike the other entries of this menu, this entry allows to format, not only to specified cell, but also one or more of any of the following explicitly selected elements: table, colgroup, col, thead, tfoot, tbody, tr, td, th.

5.2. The iframe editor dialog box

By default, an iframe element is rendered by embedding a Web browser in the styled view.

Figure 2. An embedded web browser displaying a sample YouTube™ video
An embedded web browser displaying a sample YouTube™ video
[Note]

This feature, which is based on JavaFX®, will not work if the Java™ runtime used to run XXE is older than version 1.8.0_40. Moreover, this feature may be explicitly disabled by unchecking OptionsPreferences, General|Feature, "In the styled view, render audio and video elements by embedding a media player" in XMLmind XML Editor - Online Help.

A newly embedded Web browser is not configured yet (e.g. does not point to any HTML content) and just looks like an empty gray rectangle.

Figure 3. The right-click popup menu of the embedded Web browser
The right-click popup menu of the embedded Web browser

In order to configure a media player, you may either:

  • double-click inside it;

  • OR right-click in it and select the Edit menu item;

  • OR drag and drop an HTML file onto it.

The three above actions all display the iframe editor dialog box.

Figure 4. the iframe editor dialog box
the iframe editor dialog box

An iframe element is configured as follows:

  1. Specify the location of the HTML page to be displayed by the embedded Web browser. This location may be an absolute or relative URL. A relative URL is relative to the URL of the document being edited.

    This field corresponds to the src attribute of the iframe element.

  2. Optionally, give a width and/or a height to the iframe. These dimensions are specified in pixels. The default size is 300x200. When a single dimension is specified, the other dimension is automatically computed using a 2:1 width/height ratio.

    These fields corresponds to the width and height attributes of the iframe element.

  3. Optionally, specify security options for the HTML content of the iframe element by checking one or more security option checkboxes.

    Note that settings such security options have no effect on the Web browser embedded in the styled view of XXE. These checkboxes correspond to values of the sandbox attribute of the iframe element. For example, checking "Apply all security rules" alone adds attribute sandbox="" to the iframe element. Other example, checking "Apply all security rules" then "Allow popups" and "Allow scripts" adds attribute sandbox="allow-popups allow-scripts" to the iframe element.

[Tip]

The simplest and quickest way to fill the fields of the above dialog box is:

  1. Using your Web browser, visit the YouTube page containing your video.

  2. Right-click the video and select entry "Copy embed code" from the contextual menu.

  3. Click the button.

    This button parses the content of the clipboard (which expected to contain something like <iframe...src="...) and then uses the results to initialize some of the fields of the above dialog box.