DotAdmin User Guide

The WYSIWYG Toolbar

The WYSIWYG Toolbar

The WYSIWYG Toolbar, shown above, provides many edit controls which will look familiar to users of popular word processing packages. Below, we will discuss the features of the WYSIWYG Toolbar which may behave slightly differently to similar controls in word processing software.

Undo and Redo

The two arrows in the top left of the image shown above are the Undo and Redo icons. The WYSIWYG Editor remembers always remembers the last 25 changes you made, and these buttons allow you to step backwards and forwards through your changes to allow you to correct any mistakes you may have made.

The WYSIWYG Editor only records a change to the document when you use one of the Editor's functions, such as clicking the bold button, or inserting an image. It does not remember what you type, and so cannot Undo typing, unless it recorded some other action you took before you started typing.

Applying Text Block formatting

The WYSIWYG Editor does not provide font control in the same way as most word processing applications. Instead, we have two alternatives: Style, and Text Block formatting.

Formatting a block of text.

Text Block, as the name suggests, affects an entire block of text, as illustrated in the image shown above. The Text Block drop-down menu allows you to choose between paragraph and a number of heading styles. The actual visual appearance of these block types can vary from site to site, because often a designer will override the “default” appearance for something which better suits your site's design. In the above example, the affected text begins as a Paragraph, and becomes a Heading 3. This change is reflected in the Tag List section of the editor.

As a general rule, it is best to use the most appropriate-sounding selection: Use a heading style for headings, and stick to paragraph for the rest of your text. If you use a heading for the majority of your page text simply because you like the look of the heading, then it is likely that your page will not fit in with the uniform look of the rest of your site.

Note: A Text Block can be defined as being any section of text with white space above and below it. Pressing the Return key when typing in the WYSIWYG Editor ends the current Block and starts a new one. If you want to insert a line break but not start a new block, hold the SHIFT key and then press Return.

Applying Style

The Style drop-down menu contains a list of any custom styles which your designer has provided for you to use in your pages. Style can be applied to a highlighted selection of text, or can be applied to any existing Tag in the Tag List by clicking on a Tag to select its contents before applying the style.

Style applied to a selection, and applied to a block.

When style is applied to a highlighted selection of text, a STYLE tag will appear in the Tag List to allow you to edit or remove that style, as shown above in the example on the left. If style is applied to an existing Tag, the additional STYLE tag will not be created. Instead, clicking the existing Tag in the Tag List will allow you to edit or remove the applied style. In the example above, the style has been applied to a paragraph.

Formatting Text as a List

Selecting a List changes the Toolbar display.

To format text as a list, click one of the two list icons shown in the image above. When you are working with lists, the Text Block and Justification controls disappear from the WYSIWYG Toolbar, and are replaced by the Indent and Outdent icons. When the cursor is inside a list, the Return key starts a new list item. Holding Shift and clicking the Return key inserts a line break in the current list item.

Creating a List within a List.

Clicking the Indent icon creates a new, indented sub-list within the current list, as shown in the image above. To remove a list altogether, click the Outdent icon until all levels of indentation have been removed. Your text will then be formatted as a paragraph, and the Toolbar will go back to its normal state.

Links, Images and Tables

The three icons on the far right of the WYSIWYG toolbar are for inserting links, images and tables into your document. These three topics are discussed in depth on the following pages: Editing Links, Editing Images and Editing Tables.