Tutorial: Editor

Editing Loyalty Member emails and Vision advertisements has been made easier with the addition of a new Editor. This editor allows you to create your files using in a What You See Is What You Get format (WYSIWYG), meaning that you can apply styles and insert images in a much easier manner than ever before. In this tutorial we will investigate the functionality of this new WYSIWYG editor and describe how it can be used to create professional looking emails and advertisements. Please note that the new editor is a third party tool embedded into the Zen Portal and has not directly been created by Zen Global Marketing.

There are three basic sections to the WYSIWYG editor. At the top of the editor is the toolbar. The toolbar contains four rows of buttons that allow you to apply styles, insert images or check your spelling for example. The centre of the editor is where the email or advertisement is displayed; this is where you perform the editing of the file. At the bottom of the editor is the path status, which describes in HTML format the area of the document where the cursor currently is. The bottom right corner of the editor can be clicked and dragged to resize the window as needed. Below is an image of the WYSIWYG editor. Notice the four sections - the toolbar, editor, path status and resize corner.

The Toolbar Explained

There are many buttons in the toolbar, but when should you use each tool? In this section of the tutorial, we will discuss the tools available in the toolbar. Please note that some functions of the toolbar are only compatible with Microsoft Internet Explorer.

The first row of the toolbar contains several buttons and drop-down lists that are mostly used for formatting the text. They are (in order from left to right):

• New, allows you to create a new document in the editor.

• Bold, applies / removes bold formatting to any selected text or from where the cursor currently is. An example of bold formatting is bold. This can be applied with other formatting options such as Italic to create a combination of formatting.

• Italic, applies / removes italic formatting to any selected text or from where the cursor currently is. An example of italic formatting is italic. This can be applied with other formatting options such as Bold to create a combination of formatting.

• Underline, applies / removes underlined formatting to any selected text or from where the cursor currently is. An example of underlined formatting is underlined. This can be applied with other formatting options such as Bold to create a combination of formatting.

• Strikethrough, applies / removes strikethrough formatting to any selected text or from where the cursor currently is. This can be applied with other formatting options such as Bold to create a combination of formatting.

• Align Left, aligns all text to the left margin of the page. This is the default alignment for the editor. Note that only one alignment may be used at any one time and it applies to the entire paragraph.

• Align Centre, aligns all text to the centre of the page. Note that only one alignment may be used at any one time and it applies to the entire paragraph.

• Align Right, aligns all text to the right margin of the page. Note that only one alignment may be used at any one time and it applies to the entire paragraph.

• Justify, inserts additional spaces into each line to align the text to both the left and right margins of the page. This alignment is different to centre alignment because the margins will line up whereas centre alignment will merely align each line to the centre of the page without regard to the position of the margins. Note that only one alignment may be used at any one time and it applies to the entire paragraph.

• Styles, allows a pre-defined style from an external CSS style sheet to be used for the paragraph. This allows styles from your company website to be used in the document, for example.

• Paragraph, allows a pre-defined style to be used for the paragraph. This feature is very similar to the styles feature of many popular word processing programs including Microsoft Word.

• Font Family, sets the font for the selected text or to be used from the cursor position for new text.

• Font Size, sets the size of selected text or to be used from the cursor position for new text. Both the size level from smallest to largest and the point size are displayed in the menu.

The second row of the toolbar contains several buttons and menus that allow the user to perform functions on the text. From left to right, these buttons are:

• Cut, removes selected text from the editor and sends it to the clipboard for later insertion with the paste tool. This function is the same as the cut tool in many popular word processing programs including Microsoft Word.

• Copy, copies the selected text to the clipboard for later insertion with the paste tool. This function is the same as the copy tool in many popular word processing programs including Microsoft Word.

• Paste, inserts text copied from the editor to the clipboard at the current position of the cursor, overwriting any selected text in the process. This function is the same as the paste tool in many popular word processing programs including Microsoft Word.

• Paste From Text Editor, inserts text copied from an external text editor program to the clipboard at the current position of the cursor, overwriting any selected text in the process.

• Paste From Word, inserts text copied from Microsoft Word to the clipboard at the current position of the cursor, overwriting any selected text in the process.

• Find, opens the Find/Replace screen to the Find tab, allowing the user to search the text in the editor to find specific words or phrases. Enter the text to search for in the Find What field. Select the Direction to search from the cursor position in. For a case-sensitive search, select the Match Case option. The Find Next button can be pressed to search through each occurrence of the text. Press the Cancel button to close the Find/Replace screen.

• Replace, opens the Find/Replace screen to the Replace tab, allowing the user to search the text in the editor to find specific words or phrases and replace with some other text. Enter the text to search for in the Find What field and the text to replace the found text with in the Replace With field. Select the Direction to search from the cursor position in. For a case-sensitive search, select the Match Case option. The Find Next button can be pressed to search through each occurrence of the text. Use the Replace button to replace the selected text with the replacement text. Replace All can be used to replace all occurrences of the search text with the replacement text in one action. Press the Cancel button to close the Find/Replace screen.

• Bullet Points, creates an unnumbered list of bullet points. Each time the Enter key is pressed, a new bullet point is added to the list. To finish the list, press the Enter key again in an empty bullet point.

• Numbered Points, creates a numbered list. Each time the Enter key is pressed, a new numbered item is added to the list in a sequential manner. To complete the list, press the Enter key a second time in an empty numbered point.

• Decrease Indent, moves an indented line to the left, effectively decreasing the space of the indent.

• Increase Indent, moves a line to the right, effectively increasing the space of the indent.

• Block Quote, used to indent an entire paragraph. Most commonly this is used to quote another source.

• Undo, another standard word processing tool, allows the user to undo their last action. For example, if you accidentally delete a paragraph, press the undo button to step back in time to before the deletion. Continuous undo steps are possible in the editor.

• Redo, allows the user to redo an undone action. This is most useful when undoing multiple actions - if you press the undo button too many times, press the redo button to undo the undo action.

• Hyperlink, opens the Edit Link screen, allowing you to add hyperlinks to selected text. For example, if you wanted an email to contain a link to your company's website, this feature allows you to do that. The Edit Link screen contains four tabs:

• General, allows the user to enter the details of the hyperlink. Enter the address of the link in the Link URL field. It is possible to select an Anchor for a link to the same document (for example to allow the reader of the document to navigate to another section of the document). Select how the link should be opened from the Target drop-down list - the default is to open the link in the same window or frame. The Title of the link is displayed when the user hovers over the link with the mouse cursor. The Class can be selected to set the style from the external CSS style sheet for the document.

• Popup, allows the user to create a popup window to be opened when the link is clicked. Select the Javascript Popup option to create the popup window. The path of page to be displayed in the popup window is entered in the Popup URL field and the Window Name can also be entered. Set the window Size in pixels (width by height) and the coordinates on the screen where the popup will appear in the Position fields (Horizontal / Vertical, enter c / c for the centre of the screen). You can also set up various appearance and functional Options for the popup window.

• Events, allows you to set various Javascript events to be performed when certain actions occur in the link. For example, to set an event to print the contents of the window when the user double clicks the hyperlink, enter window.print() in the ondblclick event. For more information on Javascript Events, please visit www.w3schools.com.

• Advanced, provides fields for advanced attributes for the hyperlink and relate to the HTML code for the link. These functions should only be used in rare circumstances to provide the special functionality they each provide.

Note that mostly only the General tab will be needed to create the hyperlink - the other tabs are for advanced users to apply special functions to the link.

• Unlink, removes a hyperlink created with the Hyperlink tool from the selected text.

• Insert Anchor, creates a bookmark in the document. This can be used to link sections of the page to aid in quick navigation of the document through the Hyperlink tool. Enter the Anchor Name and press the Insert button to create the anchor in the current position of the cursor. The Cancel button closes the Insert/edit Anchor screen without affecting the document.

• Insert Image, allows the user to insert an image into the document. Pressing this toolbar button opens the Insert/edit Image screen which contains three tabs:

• General, allows the user to enter general details regarding the image. The filepath of the image can be entered in the Image URL and an Image Description and Title can also be entered. When the image filepath is supplied a Preview of the image is displayed.

• Appearance, provides options for the appearance of the image in the document. Select an Alignment for the text and image and set the Dimensions (width by height) in pixels for the image. Select the Constrain Proportions option to maintain the ratio when the document is resized - if this option is not selected, the image will be stretched or squashed in whichever direction the screen is resized. Enter the Vertical Space and Horizontal Space between the image and any nearby text. If a border is required, enter the number of pixels wide for the border in the Border field. If desired, enter a Style name to allow additional formatting of the image from an external CSS style sheet. A mini-preview of the image and surrounding text is updated as you adjust the settings in the Appearance tab.

• Advanced, provides advanced settings for the image. The first set of advanced settings allow you to have two alternate images for that are swapped when the mouse is hovered over or leaves the image. This provides an interesting animation effect when the mouse is rolled over the image. To enable this setting, select the Alternative Image option. Enter the filepath for the image to be displayed when the mouse is inside the image in the For Mouse Over field. The For Mouse Out field provides the image to be displayed when the mouse is not inside the boundary of the image - enter the filepath in this field. For this option to be most effective, the images should be the same size. The Miscellaneous section of the Advanced tab provides other functional options that should only be used in special circumstances.

• Code Cleanup, provides an automated formatting check and removes any HTML code from the document that it deems to be unnecessary or generally messy.

• About, provides details of the editor's creators, Moxiecode Systems AB. Links are provided in the screen that appears to the website of the creators. This website may provide more documentation on the editor than can be found in this help system.

• HTML View, opens a new window that displays the document in raw HTML. This allows a knowledgeable user to edit the document in HTML code directly which can be more efficient than using the WYSIWYG editor.

• Insert Date, inserts the current date into the document at the current position of the cursor in the format yyyy-mm-dd. For example, pressing the Insert Date button on the sixth of February 2009 would add the following string to the document: 2009-02-06.

• Insert Time, inserts the current time into the document at the current position of the cursor in the format hh:mm:ss in 24-hour time. For example, if the Insert Time button were pressed at 2:45pm and 33 seconds, the following string would be inserted into the document: 14:45:33.

• Preview, opens a new window previewing the document as it would look to the reader, including all formatting, images and hyperlinks.

• Text Colour, opens a small drop-down allowing you to select a colour that selected text or new text from the current cursor position is displayed in. For example, selecting red will make all text appear in red.

• Highlight Colour, opens a small drop-down allowing you to select a background colour for selected text or new text from the current cursor position as though it had been drawn over with a highlighter pen. For example, selecting yellow will colour the background of the text in yellow.

The third row of the toolbar contains buttons that allow you to insert and edit tables as well as further formatting options. In order from left to right, these buttons are:

• Insert Table, allows the user to create or modify a table through the Insert/Modify Table popup window which contains two tabs:

• General, allows you to set the number of Columns (Cols) and Rows in the table, the Border width, Cell Padding and Cell Spacing (all in pixels) and the table Alignment in the page. The General tab also provides fields to set the Width and Height of the table in pixels, the Class for formatting via external CSS style sheet and whether to display a Table Caption for the table.

• Advanced, provides more advanced details about the table that relate to the HTML code directly. The main fields that you might want to edit in this tab are the Background Image (where you can enter the filepath of an image to be displayed as the background for the table), Border Color (where you can set the colour of the border for the table) and the Background Color (where you can set the colour of the background for the table).

• Table Row Properties, allows the user to set the properties for the current row. This overrides the table properties for the row and can be used to set alternating background colours for the rows of the table for example.

• Table Cell Properties, allows the user to set properties for the current cell. This overrides the table properties and row properties for the cell and can be used to highlight specific cells in the table for example.

• Insert Row Before, inserts a new, blank row into the table immediately above the row where the cursor is currently.

• Insert Row After, inserts a new, blank row into the table immediately below the row where the cursor is currently.

• Delete Row, removes the row that the cursor is currently in. This operation removes any text in the selected row. If you make a mistake, press the undo button to reverse the action.

• Insert Column Before, inserts a new, blank column into the table immediately to the left of the current cursor position.

• Insert Column After, inserts a new, blank column into the table immediately to the right of the current cursor position.

• Delete Column, removes the column that the cursor is currently in, including any data contained in the column. If you make a mistake, press the undo button to reverse the action.

• Split Merged Cells, effectively an undo function for merged cells, this button allows cells that have been merged with the Merge Cells button to be split.

• Merge Cells, removes the border between selected cells to create a single, larger cell in the table.

• Insert Horizontal Ruler, inserts a horizontal line one pixel in height along the width of the page in the document.

• Remove Formatting, removes all formatting from the selected text. This is a quick way to make a set of text that has had bold, italic and underline formatting applied set back to normal with the click of a single button, for example.

• Toggle Guidelines / Invisible Elements, useful when editing tables with no borders, this option allows the user to see the borders of cells in a table that aren't displayed in the final document.

• Subscript, formats the text to a small version in the footer of the line. This is most useful for mathematical equations.

• Superscript, formats the text to a small version in the header of the line. This is most useful for mathematical equations and cross references or citations.

• Insert Symbol, allows the user to insert a selected symbol from the popup window that appears when the button is pressed. The selected symbol is inserted into the document at the place where the cursor is when the Insert Symbol button was pressed.

• Insert Emoticon, allows the user to insert instant messenger style emoticons into the document. The emoticon is inserted at the place where the cursor is currently.

• Spell Check, uses the Internet Explorer ieSpell plugin to check the spelling of the document.

• Insert Media, allows the user to insert a Windows Media Player WMV video file or other media file such as an Adobe Flash SWF file. Please note that emails created in the Email editor are required to be under a maximum size and inserting such media files in them can quickly cause the email to exceed this limit. This feature is perfect for Vision advertising files however. Pressing the Insert Media button opens the Insert Media popup screen which contains two tabs:

• General, contains settings that describe the media file being embedded in the document. Select the Type of media file from the list (Flash, Shockwave, Quicktime, Windows Media or Real Media). Enter the filepath for the media file in the File/URL field. Set the Dimensions of the displayed embedded file in pixels (width by height) and select whether to Constrain Proportions when the screen is resized. After the filepath is entered for the embedded media file, a Preview appears for the file, allowing you to see what will be embedded in the document.

• Advanced, contains advanced settings for the embedded media file. This tab allows you to set the alignment, background colour and margins for the display of the file. For Flash files there is another section that allows the user to set the quality as well as other miscellaneous functions of the flash player.

• Horizontal Rule, allows the user to insert a customised horizontal line into the document. Customisation options include setting the Width of the line in pixels or percentage of the width of the screen, setting the Height (thickness) of the line in pixels (defaults to Normal height) and whether to have No Shadow for the line. Press the Insert button to insert the line at the cursor's current position or the Cancel button if you change your mind.

• Print, allows the user to print either the document. When the button is pressed, the standard print dialog is opened. Select the printer and your printing options and press the Print button to print the document.

• Direction Left to Right, sets the direction of typed text to go from left to right. This is set by default and the button allows you to undo the pressing of the Direction Right to Left button if needed.

• Direction Right to Left, sets the direction of typed text to go from right to left. This setting is generally for internationalisation, allowing languages such as Arabic to be used in the editor.

• Toggle Full Screen Mode, sets and disables full screen mode, meaning that the editor is displayed in the entire frame. This is useful for editing as it allows more of the document to be seen on the screen, but note that fields on the screen that are outside the editor (such as the Subject line in the email editor) are hidden when the editor is in full screen mode. In order to be able to view and edit such fields, the editor must disable full screen mode.

The fourth and final row of buttons in the editor's toolbar control layers, change tracking and high level data for the document. In order from left to right, the buttons of the fourth row of the toolbar are:

• Insert New Layer, allows you to create layers in your document. This is a similar feature to Adobe Photoshop layers. It allows you, for example, to have a background image and add text in the foreground.

• Move Forward, moves the cursor forward through the layers.

• Move Backward, moves the cursor backward through the layers.

• Toggle Absolute Positioning, toggles the selected area between relative and absolute positioning. This is most useful when you want to have an image embedded with surrounding text, for example. Absolute positioning in this situation can create a text box area where the text is placed, rather than relative positioning where the text just stretches from one margin to the other.

• Edit CSS Style, allows you to edit the external CSS style sheet for the current area of the document. The current area of the document is displayed in the path at the bottom of the editor. Editing the CSS style sheet for an area of the document allows you to create Styles that can be re-selected for other areas from the Styles drop-down list, increasing formatting consistency in your document.

• Toggle Spell Checker, allows you to turn on automatic spell check for the document. The drop-down menu allows you to select the language in use in the document.

• Citation, allows you to enter details of a citation. The selected text will be underlined with a light blue dashed line in the document and when the user hovers over it with the mouse a tooltip will be displayed with the text entered in the Title field of the Citation element screen. The ID, Class and Style fields relate to the CSS style sheet. Text Direction allows you to set the direction the tooltip text will be displayed in and the Language can also be set.

• Abbreviation, allows you to enter details of an abbreviation. The selected text will be underlined with a light grey dashed line in the document and when the user hovers over the text they will see a tooltip message displaying the Title of the abbreviation. The ID, Class and Style fields relate to the CSS style sheet. Text Direction allows you to set the direction the tooltip text will be displayed in and the Language can also be set.

• Acronym, allows you to enter details of an acronym. The selected text will be underlined with a light grey dashed line in the document and when the user hovers over the text they will see a tooltip message displaying the Title of the acronym. The ID, Class and Style fields relate to the CSS style sheet. Text Direction allows you to set the direction the tooltip text will be displayed in and the Language can also be set.

• Deletion, allows you to track document changes. Select text (or something else) to be removed from the document and press the Deletion toolbar button rather than the delete or backspace button on the keyboard. Enter details of the deletion, such as the Date/Time (use the calendar button to insert the current date and time) of the deletion. The Cite field is used in conjunction with the Insertion toolbar button to reference elements that have replaced the selected text. The Title field allows you to enter a reason why the element was deleted, or by whom for example. ID, Class and Style relate to the external CSS style sheet. Text Direction and Language control the display settings for the deleted element. Pressing the Cancel button cancels the operation. When the Insert button is pressed, the selected area is changed to red and has a red line through it to indicate it has been removed from the document. Any such area will not be delivered in the final document, but this feature allows you to see the changes that have been made to the original.

• Insertion, allows you to track document changes. Select text (or something else) that has been added to the original document and press the Insertion toolbar button. Enter details of the insertion, such as the Date/Time (use the calendar button to insert the current date and time) of the insertion. The Cite field is used in conjunction with the Deletion toolbar button to reference elements that have been replaced the selected element. The Title field allows you to enter a reason why the element was inserted, or by whom for example. ID, Class and Style relate to the external CSS style sheet. Text Direction and Language control the display settings for the inserted element. Pressing the Cancel button cancels the operation. When the Insert button is pressed, the selected area is changed to green and is underlined with a green line to indicate it has been inserted into the document. Any such area will be delivered in the final document as normal, but this feature allows you to see the changes that have been made to the original.

• Insert Attributes, allows you to edit the HTML attributes for selected elements in the document. For more details on HTML attributes, please visit www.w3schools.com.

• Toggle Visual Control Characters, switches between being able to see and hiding the visual control characters from the screen. These characters allow you to see whitespace in the document. For example, each carriage return will be displayed as a lightly coloured dot on the line.

• Insert Non-breaking Space Character, inserts the HTML ' ' character. This is a special character which HTML formats as a specific width of blank space regardless of the font size in use.

• Insert Pre-defined Template, allows you to insert a previously created template into the document. Templates can be thought of as stationary that the document is then created on. Select the template from the drop-down Template list and the template will be displayed in the Preview section of the screen. When you are happy with the template selection, press the Insert button to add it to the document. The Cancel button will close the window without inserting a template into the document.

• Insert Page Break, allows the user to insert a new page into the document, forcing it to move to the next page for anything following the break. This function is similar to the Page Break function of many popular word processing programs including Microsoft Word.

• Document Properties, allows the user to set properties for the document as a whole. The Document Properties screen contains two tabs:

• General, provides fields to set the meta data and language and encoding settings for the document. Here you can set the document Title and enter a list of Keywords for the document. Description, Author and Copyright details for the document can also be entered. Select the Character Encoding, Doctype, Language Code and Language Direction for the document.

• Appearance, allows the user to set the default appearance settings for the document body. Set the Font Family, Font Size and Text Colour in the Text Properties section of the Appearance tab. Apply a Background Image or Background Colour in the Background Properties section. Set the Left Margin, Right Margin, Top Margin and Bottom Margin in the Body Margins section of the Appearance tab. Set the Link Colour, Visited Colour and Active Colour (for when the mouse cursor hovers over the link) for the hyperlinks in the document in the Link Colours section. Select an external CSS Stylesheet and default body Style in the Stylesheet and Style Properties section of the Appearance tab. Note that these are default settings and can be overridden when editing the document through the use of the various formatting options.

In this topic we have investigated the use of the new HTML WYSIWYG Editor for Loyalty email and Vision advertising. We have paid particular attention to the toolbar of the editor as this is where most of the functionality for styling and inserting images and other media takes place. This new editor allows the user to create dynamic documents for their customers in the Loyalty and Vision packages of the Portal. For more information on the new editor, please visit the website of the editor's creators, http://tinymce.moxiecode.com/.