After you have chosen to create an HTML message using the WYSIWYG editor, you will be presented with the WYSIWYG editor. The WYSIWYG editor is visually and functionally very similar to Microsoft Word. If you are not sure what the button icons on the WYSIWYG editor represent, you can mouse over them to display the buttons name. If you want to learn about the functionality of the buttons used in the WYSIWYG Editor, you can read the descriptions below. If you want to skip to the description of a particular button, click on the name of the button in the "Skip To" section below.

Skip To:

Edit HTML Source

Toggle full screen mode

Cut

Copy

Paste

Paste as Plain Text

Paste From Word

Undo

Redo

Find

Find/Replace

Select All

Remove Formatting

Insert/edit link

Unlink

Insert/edit image

Insert a new table

Insert horizontal ruler

Insert custom character

Insert/edit anchor

Bold (Ctrl + B)

Italic (Ctrl + I)

Underline (Ctrl + U)

Outdent

Indent

Blockquote

Insert Tab

Align left

Align center

Align right

Align full

Ordered list

Unordered list

Toggle spellchecker

Field Tags

Special Tags

Paragraph

Font family

Font size

Select text color

Select background color

I. Understanding the WYSIWYG Editor

To help you better understand the all of the features the WYSIWYG editor has to offer, the functionality of each button will be described in detail below.

Edit HTML Source

Top

This button lets you view and edit the Raw HTML source for your message. When you click this button, a pop-up window will appear containing the HTML source of your message.

Warning - If you do not click Update, any changes that you make to the HTML source will not be saved and reflected in the other versions of your message.

Any changes you make in the HTML source will be reflected in the WYSIWYG editor view of your message, as well as the text version of your message, provided you clicked Update. The Word wrap checkbox fits all of the HTML content into the default window size so that you can see all of your HTML code without having to scroll sideways.

Toggle fullscreen mode

Top

This button will open up the editor in a full screen view allowing for a larger workspace. To return to the normal view, click this button again.

Cut

Top

The Cut button will remove selected items (text, images, etc.) from the message body.

Copy

Top

The Copy button will copy selected items (text, images, etc.) in the message body.

Paste

Top

The Paste button will take a copied item and place in a specified location in the editor/

Paste as Plain Text

Top

Use this button to remove the formatting from copied text, and paste it plain text format.

To Paste as Plain Text:

1. Click the Paste as Plain Text button. A pop-up window will appear.
2. Copy the text you wish to paste into the WYSIWYG editor by highlighting the text and hitting CTRL + C on your keyboard.
3. Paste that text into the text box in the Paste as Plain Text pop-up window by placing your cursor in the text box and hitting CTRL + V.
4. By default, the linebreaks will be kept as they appear in the text box. If you wish to disable this, click the Keep linebreaks.
5. Click Insert to add the text into WYSIWYG Editor as plain text.

Paste From Word

Top

The Paste From Word button allows you to paste content directly from Microsoft Word into the WYSIWYG Editor.

Note - If you are going to be pasting content directly from Microsoft Word into the WYSIWYG Editor, then you need to use this button.

1. Click the Paste From Word button. A pop-up window will appear.
2. Copy the text you wish to paste from Mircosoft Word into the WYSIWYG editor by highlighting the text and hitting CTRL + C on your keyboard.
3. Paste the copied text into the text box in the Paste from Word pop-up window by placing your cursor in the text box and hitting CTRL + V.
4. Click Insert to add the text into WYSIWYG Editor.

Undo (Ctrl + Z)

Top

This button and it's corresponding hot key will undo the previous change or edit.

Redo (Ctrl + Y)

Top

The redo button will redo a change or edit that has been undone.

Find

Top

The Find button allows you to locate specific words or phrases. You can also choose to replace those words once they are found.

To find a specific word or phrase:

1. Click the Find button. A pop-up window will appear.
2. Type the word or phrase you wish to locate in the Find what text box.
3. Use the Direction radio buttons to determine if the application will start looking above (Up) where your cursor is currently located, or below (Down).
4. If you want the application to also match the case of the word or phrase you wish to find (i.e. searching for "Bob" will find Bob but not bob), click the Match case check box.
5. Click the Find next button to find the match(s) for the word or phrase you entered in step 2

To perform a search and replace:

1. Click the Find button. A pop-up window will appear.
2. Click the Replace tab.
3. Type the word or phrase you wish to locate in the 'Find what' text box.
4. Type the word or phrase you wish to use as a replacement for the word or phrase you entered in step 2.
5. Use the Direction radio buttons to determine if the application will start looking above (Up) where your cursor is currently located, or below (Down).
6. If you want the application to also match the case of the word or phrase you wish to find (i.e. searching for "Bob" will find Bob but not bob), click the Match case check box.
7. Click Find Next to begin finding matches for the word or phrase you entered in step 2.
8. When a match is found, you can click Replace to replace the word or phrase with the word or phrase you entered in step 4. If you wish to replace all of the matches found, then click Replace All.

Find/Replace

Top

The Find/Replace button will take you to the same pop-up as the Find button, only you will be shown the options for search and replace as opposed to just find. You can use the instructions under Find to perform all of the actions in the Find/Replace pop-up window.

Select All

Top

The Select All button will highlight all of the content in the WYSIWYG Editor.

Remove formatting

Top

The Remove formatting button will remove the HTML formatting from a selected area. To remove formatting from specific content, highlight that content and the click Remove formatting.

Insert/edit link

Top

The Insert/edit link button lets you insert a new link or edit an existing link in your message.

To insert a link:

1. Highlight the text that you want to turn into a link.
2. Click the Insert/edit link button. A pop-up window will appear
3. Type in the link URL in the Link URL text box. You can also click the Browse icon next to the Link URL text box to use the File Manage to locate the object you wish to link to. Make sure to always add the http:// protocol on to the beginning of your URL. If you forget to do this, when you go to insert the link, pop-up will appear asking if you would like to add the http:// protocol. Click Ok to add the protocol onto the beginning of your URL.
4. Click Insert to create the URL. This represents the minimum you need to do to insert a link. See below for an explanation of the additional settings you can use.
5. If you are adding a mailto: link, you will be prompted with a pop-up asking if you want to add the required mailto: prefix. Click Ok to add the prefix and insert the link.

Additional Settings

• Link list - The link list pull-down contains links to action pages that you can create in the application. Each of the options is described below:
  • Manage Preferences URL - This option links to your 'Manages Preferences' page.
  • Unsubscribe URL - This option inserts a link to your 'Unsubscribe' page.
  • Forward to Friend URL - This option will link to your 'Forward to a Friend Page'.
  • Web Version URL - This option provides a link that allows a contact to view this email in a browser outside of their email client. This may be helpful if the contact doesn't know how to load images, is seeing a malformed email due to rendering issues, or is viewing a text only version of the email. This should never be used as an image link.
  • Confirm URL - This option links to your Confirmation page. You can use this option in confirmation/opt-in messages to allow contacts to confirm subscription to lists.
• Anchors - The Anchors pull-down box contains a list of the anchors that you have added to your messages. If you select an anchor, it will become the URL for your message. For information anchors see the section on anchors below.
• Title - The Title text box lets you add a title to your link. When a title is added to a link, a a tool-tip will appear containing the title when you mouse-over the link.

Unlink

Top

The Unlink button will remove the formatting (i.e. the <a href="") that causes text be a hyperlink. In turn, the hyperlink text will become normal text. To use the Unlink button, highlight the link that you wish to remove link formatting from, and then click Unlink.

Insert/edit image

Top

The Insert/edit image button lets you add an image to your message.

To insert an image:

1. Move your cursor to the place in the message where you want the image to display.
2. Click the Insert/edit image button.
3. Type in the image URL for the image you wish to add in the Image URL text box. You can also click the Browse icon next to the Image URL text box to use the File Manager to locate the object you wish to link to. Make sure to always add the http:// protocol on to the beginning of your URL. If you forget to do this, when you go to insert the image, pop-up will appear asking if you would like to add the http:// protocol. Click Ok to add the protocol onto the beginning of your URL.
4. Type in a description for the image. This text will act as the alt attribute for your image and will be shown if the image cannot be displayed. Although not required, it is important to provide a description for your image in case your contacts have adjusted their inbox settings to block images, or their email client disabled images. If you forget to include a description for an image, a pop-up will appear to remind you to include an image description.
5. Use the Preview window make sure you have uploaded the correct image.
6. Click Insert to add the image to your message. This represents the minimum you need to do to insert an image. See below for an explanation of the additional settings you can use on the General and Appearance tab.

General Tab

• Title - The Title text box lets you add a title to your image. When a title is added to an image, a tool-tip will appear containing the title when you mouse-over the image.

Appearance Tab

• Alignment - The Alignment pull-down box allows you to adjust the position of the image in your message. You can use the preview window directly next to the Alignment pull-down box to see how the different alignment options will position the image in your message.
• Dimensions - You can use the Dimensions option to define the width and height in pixels (px).
• Vertical space - The Vertical Space option defines the amount of empty space above and below the image. This is the same as adding top and bottom padding in CSS.
• Horizontal space - The Horizontal Space option defines the amount of empty space on the left and right of the image. This is the same as adding left and right padding in CSS.
• Border - The Border option lets you define a border to place around your image. For example, if you enter 5, then a 5 pixel border will be placed around the image.
• Style - The Style option lets you set the style for the border. You will use the same conventions used in CSS to define the style for the border. The default style is border: 5px solid black;.

Hosting images in Clubhouse Online e3 for clubbroadCast message

Due to space limitations in the hosting area of clubbroadCast, you can add images to your club’s media library in Clubhouse Online E3 and insert them into clubbroadCast messages. The specific media library that the images are added to must be marked as a public library to ensure that anyone can view the images within the clubbroadCast messages.
 

1. Go to Club Central > Tools > Media Libraries.
2. Edit the public media library, which is usually called Site Media
3. Once you’re in the library, select the folder where you would like to store the clubbroadCast images or create a new folder by clicking ‘New Folder’ in the upper left corner.
4. Click on ‘New File’ to access the computer or network, select the image, and click ‘Open’ to upload the image.
5. Click on ‘View’  under Actions to open the image on a new browser window and copy the URL.
6. Click ‘Insert/Edit Image’  in the clubbroadCast dialog box and paste the image’s URL (obtained from ClubHouse Online e3) in the Image URL field and then click ‘Insert’.

Insert a new table

Top

The Insert a new Table button lets you add a table into the body of your message.

To insert a table:

1. Move you cursor to the spot in your message where you want the table to go.
2. Click the Insert a new table button. The Insert/Modify table pop-up will appear.
3. By default, the table is set to have 2 columns and 2 rows. You can click Insert to create this basic 2 column, 2 row table. However, you can change the settings on the General and Advanced tab to customize the table to your specifications. See below for more information on the General and Advanced tabs.
4. Click Insert when you have finished setting all of the table options.

General Tab

• Cols - The Cols text box lets you specify the number of columns that will be created in your table.
• Rows - The Rows text box lets you specify the number of rows that will be created in your table.
• Cellpadding - The Cellpadding text box lets you specify the space between the cell walls and the contents of the cell (in pixels). Do not enter "px" after the value you enter here, only enter the numerical value.
• Cellspacing - The Cellspacing specifies the space between cells (in pixels). Do not enter "px" after the value you enter here, only enter the numerical value.
• Alignment - The Alignment pull-down box lets you choose to align the table left, center, or right in your message.
• Border - The Boder text box lets you define the thickness of the border used in your table (in pixels). Do not enter "px" after the value you enter here, only enter the numerical value.
• Width - The Width text box lets you define the width of the table (in pixels). Do not enter "px" after the value you enter here, only enter the numerical value.
• Height - The Height text box lets you define the height of the table (in pixels). Do not enter "px" after the value you enter here, only enter the numerical value.
• Table Caption - The Table Caption text box allows you to add a caption to your table. The table caption text box will appear at the top of the table when you create the table, allowing you to type in the caption for your table.

Advanced Tab

• Border color - The Border color text box and color selector let you choose the color of the border surrounding your table. You can either enter the CSS value of the color you want to use in the text box, or select the color you want to use from the color selector.
• Background image - The Background image text box and color selector let you choose the color used for the table background. You can either enter the CSS value of the color you want to use in the text box, or select the color you want to use from the color selector.

Insert horizontal ruler

Top

The Insert horizontal ruler button will add a horizontal line that spans the width of the message at the location of your cursor.

Insert custom character

Top

The Insert custom character button lets you add custom HTML characters to your message. When you click this button, a pop-up window will appear that contains all of the available custom HTML characters. If you mouse-over a particular character, you will be shown am enlarged preview and the name of the HTML character. You will also notice that you are provided with the HTML-Code and NUM-Code for that particular character. When you find the character you want, click on it, and it will be added to your message at the location of your cursor.

Insert/edit anchor

Top

The Insert/edit anchor button adds an anchor to your message at the location of your cursor. You can use the anchor to create a bookmark in your message.

Bold

Top

The Bold button allows you to type text in bold font.

Italic

Top

The Italic button lets you type text in italic font

Underline

Top

The Underline button allows you to type text that is underlined.

Outdent

Top

The Outdent button will perform an outdent of your text.

Indent

Top

The Indent button allows you to perform an indent.

Blockquote

Top

The Blockquote button adds HTML blockquote tags around a selected area of text. The HTML blockquote tag is most commonly used to indicate a block of text quoted from an external source.

Insert Tab

Top

The Insert Tab button will insert will a tab (4 spaces) from the location of your cursor. For formatting purposes, it is best to use the tab button and not the tab key on your keyboard.

Align left

Top

The Align left button will align the message content to the let side of the page.

Align center

Top

The Align center button will align all of your content to the center of the page.

Align right

Top

The Align right button will align all of your message content to the right of the page.

Align full

Top

The Align full button will not align your text and cause the content to use the full width of the page.

Ordered list

Top

The Ordered list button lets you create a list arranged in numerical order.

Unordered list

Top

The Unordered list button allows you to create a list using dashes to signify a list item.

Toggle spellchecker

Top

The Toggle spellchecker button allows you to perform a spell check on your message.

To use the spellchecker:

1. Click on the Toggle spellchecker button. All misspelled words will be underlined with a red line.
2. Right click on a misspelled word to bring up a list of suggested correct spellings.
3. Scroll down to the correct spelling of the word and select it from the list of suggested words. The misspelled word will be replaced by the correct word you choose.

Field Tags pull-down

Top

The Field Tags pull-down contains all of the fields that you have created in your account. When you add a field tag to your message, a the tag will appear in the following format %%tagname%%, where tagname represents the name you assigned to that field. The %%tagname%% tag will be replaced with the value for that field when the message is sent. For example, if you have a field called firstname used to store the first name of your contacts, and you add choose to add this field tag to your message, then the %%firstname%% will be replaced by the firstname tag value. The firstname tag value will be whatever you have stored in your account for the particular contact receiving the message.

Special tags pull-down

Top

The Special Tags pull-down acts similar to the Field Tags pull-down, with the only difference being that Special Tags are not replaced field values. Rather they are replaced by other data contained in your account. For a full explanation of each type of special tag, see the Special Tags section in the Creating Messages Part 2: Specifying Sender Options And Adding Content help topic lined to at the bottom of this page.

Paragraph

Top

The Paragraph Drop-Drown lets you change the paragraph style for text in your message. Each of the possible selections provides you with a preview of what text using that paragraph style will look like.

Font family

Top

The Font family pull-down lets you change the font used in the body of your message.

Font size

Top

The Font size pull-down lets you change the size of the font used in your message.

Select text color

Top

The Select text color button lets you pick the color used for text in you message. When you first click the Select text color button, you will be shown the default palette of colors. To see additional colors, click More colors.

Select background color

Top

The Select background color button will set the background color for a given selection of highlighted text. To see additional colors, click More colors.