How to use the WYSIWYG

The WYSIWYG Editor is a text editor, similar to MS Word, that is used to produce program brochures in Web page format. ‘WYSIWYG’ is pronounced ‘whizzy-wig’ and stands for, ‘What You See Is What You Get.’

Different browsers work differently with the WYSIWYG content. If you're having trouble getting the content to appear as desired, try working in a different browser as this may give you different results

Each Terra Dotta software client that subscribes to your programs has a unique layout and CSS on their own website. When they download your programs, some styling could be overridden by their site’s CSS.

.

The WYSIWYG Editor, as seen above, can be used to insert and modify any text, image, table, hyperlinks, documents, and special characters for use on your program brochures.

WYSIWYG Editor Options

Font drop-down list box - The font drop-down list enables you to change the font of the text by selecting an option from the drop-down list box.

Size drop-down list box - The size drop-down list enables you to change the size of the text by selecting an option from the drop-down list box.

Paragraph Format drop-down list box - The format drop-down list enables you to apply a pre-defined font and size format to the text by selecting a format from the drop-down list box. ‘Normal’ is the default setting.

Insert Web Link icon (a picture of a globe with a linked chain at the bottom) - enables you to insert various types of links. When you highlight text in the content area and click the icon, a window appears:

Link Type: There are three different link types that are available for you to choose from. The different types of links allow advanced functionality. Choose the link type from the drop-down box.

URL: This is the most common kind of link. If you wish to insert a URL link, choose ‘URL’ under ‘Link Type.’ Choose the correct Protocol (http, https, ftp, news or other) and copy the URL into the ‘URL’ field. You can also specify how the link will appear to the reader under the ‘Target’ tab. You can choose to have the link appear in the same window, a pop-up window, or other options. Additional options for experienced web editors are located under the ‘Advanced’ tab. Click ‘OK’ to apply.

Link to anchor in the text: You have the ability to link to another section of the same document. This feature could be used to create a linkable contents list in a brochure, for example. In order to set up this kind of link, first you have to create the ‘anchor.’ (Read about how to create anchors in the ‘anchor’ section below.) Choose ‘Link to anchor in the text’ under ‘Link Type.’ Select the anchor to which you’d like the text to link. Additional options for experienced web editors are located under the ‘Advanced’ tab. Click ‘OK’ to apply. For more information about anchors and how to use them, you can also refer to the Knowledgebase video, ‘Video: How to add anchor links.’

E-mail: You can set up the link so that it will launch the user’s default email program with a new message with pre- defined fields. Choose ‘E-mail’ under ‘Link Type.’ Define the email address to which the message should be sent. You can also specify default message subjects and body. Additional options for experienced web editors are located under the ‘Advanced’ tab. Click ‘OK’ to apply.

The Insert Anchor icon (a picture of a flag) allows you to link text in your webpage to another part of the text in same webpage.

This functionality is useful for a ‘table of contents’ in brochures. First, decide which text you wish to be the ‘anchor.’ This is the text that will be the destination of the link. When the linked text is clicked, the viewer will be brought to the anchor. Highlight the text you wish to turn into an anchor and click the anchor icon. A box will appear. Assign the anchor a name and click ‘OK.’ A picture of an anchor will appear in the WYSIWYG next to the text assigned as the anchor. This anchor will not be visible to site visitors.

The Image icon enables you to insert or modify images in the content:

Use this icon for images that are already published on the web (either on your site, or a different site) and have a URL, or for images that have already been uploaded to the WYSIWYG. When you click the icon, a new window appears where you can specify the URL of the image and set its position within the page. You can also change the dimensions of the image to make it larger or smaller – however, for best results we recommend that the image be formatted and sized properly before uploading them to the WYSIWYG. The text that appears in the sample window demonstrates how text will wrap around the image – this text will not appear to the viewer. Click ‘OK’ to insert the image.

The Image Library icon allows you to insert an image from your Image Library:

Use this icon to insert images that you’ve already uploaded to the Image Library or browse your computer and insert new images.

The Document Center icon enables you to insert a file:

When you click the icon, a new window opens. You can attach a document that already exists in the Document Center, or you can browse your computer to upload a file from your documents. You can then decide if the file should appear as a pop-up window (recommended for web content), or in-line with the page. Click ‘Submit’ to upload the document.

The Table icon helps you insert a table in the content of the Web site.

When you click the link, a window appears, prompting you to enter the size and other specifications for the table. Click ‘OK’ to insert the table. You can also edit the table after it is inserted.

The Source icon allows you to switch between the normal WYSIWYG Editor view and raw html:

If you click on the Source icon, the WYSIWYG Editor will switch to an html editor. In this view, you can see the underlying html as well as edit it. Click the Source icon again and the Editor will revert to the regular WYSIWYG view.

The Insert Special Character icon allows you to insert characters that do not appear on a normal keyboard:

If you click the icon, a window will appear with the options for special characters. Click the character you would like to insert and it is inserted automatically.

The Paste from Word icon helps you to clean non-html tags from highlighted text that may exist from a copy or paste performed from a MS Word document.

When you click the icon, a new window will appear. Paste your text from your word document and it will be inserted in the WYSIWYG Editor. Note: Copying and pasting from a Word document is not recommended. Instead, try copying from Word, pasting into a plain text editor such as Notepad, and then copying the content from Notepad and paste it into your WYSIWYG Editor. By first pasting in Notepad you will remove the excess htnl tags which can cause format problems in the WYSIWYG. This method tends to work better than using this Remove tags button.

The Remove Format icon allows you to remove the formatting from text that you have pasted using the Paste from Word icon:

Highlight the text from which you wish to remove formatting. Click the icon, and the formatting will immediately be removed.

Font Format icons: You have the following font format options:

 Bold  Italics  Underline  Strikethrough

 XSubscript  XSuperscript

Undo and Redo icons:

Click the icon pointing to the left (the Undo icon) to undo changes to your text. Click the icon pointing to the right (the Redo icon) to redo the changes that were deleted or undone.

Text alignment icons:

Use these icons to align the text and/or images to the left of the page, the center, the right, or to ‘justify’ (evenly space) the text over the entire page.

Advanced Formatting icons:

You can insert a numbered list, insert bullet points, decrease an indentation in the text, or increase an indentation in the text. Helpful Hint: You can insert a space between bullets or numbered lines by holding down the Shift key when you hit Enter.

Text Color & Background Color icons:

You can change the color of the text by highlighting the text you wish to edit and clicking the Text Color icon. You can also highlight the background behind text by highlighting the text and clicking the Background Color icon. Choose the color you wish to use for the text from the Automatic section, or click ‘More Colors’ in order to choose or create customized colors. If you know the ‘Hex’ code for the color you would like to use, you can enter it in the text box. Click ‘OK.’

Insert Horizontal Line icon:

Click this icon to insert a horizontal line into the text.

Preview icon:

Click the Preview icon to see a preview of how the page will look to a viewer. This can be used to check the placement of elements in the content in different browser dimensions. Note: The preview button does not apply the site's CSS formatting, so content may look different in the preview window than on the site.