Using the WYSIWYG editor

WYSIWYG stands for What You See Is What You Get. The WYSIWYG editor is a way to produce HTML without writing any code.

For example you can make text bold by highlighing it and then clicking the Bold icon. This automatically writes the HTML code:

Your text here

You must use the tools in your editor to produce correct HTML. Using the tools wrongly will produce inaccurate HTML, which can affect the appearance of your website in unpredictable ways.

Do not copy text directly into the WYSIWYG.

If you copy content directly into the WYSIWYG from another source (for example, copying it from Microsoft Word) you will also introduce the hidden code for that content. The code may conflict with your website code, and badly affect the layout of your web page.

Editor tools

The editor usually looks like this. In some cases certain tools may be disabled because they are unneccessary for the specific content space.

Top row:

Bold

Italic

Underline

Strike through

These tools apply basic formatting to text. They can be applied to single characters, words, or whole paragraphs.

To use them, click the tool and then type inside the editor box. Or highlight existing text within the editor box and click the tool. You can apply more than one format at the same time.

This is bold, italic, underline and all three together.

Remove formatting

This tool can be used to remove any of the above formatting to selected text. Highlight the text and then click Remove formatting.

Ordered list

Unordered list

You can use these to create lists of bullet points. An unordered list uses normal bullet points. An ordered list adds bullet points with numbers.

These styles can be applied to whole paragraphs. Each paragraph becomes a bullet point.

To use these tools, click the tool and then type. Press return to create a new bullet piont. When you've finished adding bullet points, click the tool again.

Alternatively, type all of your content and then highlight the text and click the tool. Or click once anywhere within a paragraph, and click the tool to make that paragraph into a bullet point.

Insert horizontal line

This tool adds a horizontal line across the content space. Horizontal lines appear immediately after the preceding paragraph.

Decrease indent

Add indent

These tools can be used to indent a paragraph of text, and then to remove the indentation. To use this tool, click once anywhere within a paragraph and then click the tool. Click the tool again to add more indentation. Click Decrease indent to reduce the indentation again.

Align left

Align centre

Align right

Justify

These tools can be used to position text within the content space. To use the tool click a paragraph of text (or an image) and then click the tool.

Justify makes the text line up neatly on both sides by altering the space between letters on each line of text. It should be used carefully, because it can make text difficult to read. Remember, some users may choose to view text larger (especially users who are visually impaired). So the "character spacing" effects of justifying text may be more severe for these people.

Cut

Copy

Paste

Paste as plain text

Paste from Word

These tools can be used to cut, copy and paste text within the content space. Please always ensure you paste as Plain text or as Paste from Word if you are copying formated text from another source. This will remove any formatting, and maintain the integrity of the HTML on your website.

Undo

Redo

These tools can be used to redo or undo changes you make to the content within the WYSIWYG. They do not affect any other part of the page or CMS.

About help files

Most of these help files are applicable to every installation. However, not every installation of Treeline is identical, and your website may have some customisations or differences.

If you can't find find a help file for your particular customisation please contact us to ask for individual help.