Custom Vantage Web™ How to Work with the WYSIWYG Editor
by Becky Skelley
Introduction
Last month, Amanda walked us through using Categories within Custom Vantage Web. This month I will dive deep into the use of the ‘What You See Is What You Get’ Editor (WYSIWYG, pronounced Wizzy Wig). See Picture-1 for a visual reference. The WYSIWYG editor can be found throughout Stamp Shop Web’s admin area, specifically within editing products, editing categories, custom pages, custom page instructions, and HTML areas. The WYSIWYG editor is an excellent tool that allows you the ability to add custom designs to your site using HTML, tables, links and more. You can simply change text size and color or go as far as adding links, images, tables and more. Here at Connectweb, we like the editor mostly because anyone can use it; whether you’re a novice with computers or a trained professional.
Steps to Follow
Let’s begin by taking a closer look at the editor. As previously mentioned it can be viewed when creating/editing a custom page, so for this example let’s create a custom page. To do so, first we must sign into the admin area of your Stamp Shop Web site. Once inside, click on the Content tab. Next, within the Content menu column (located on the far left) click on the Custom Pages menu item (See Picture-2). A custom page is similar to a plain HTML page, where it has no content from the start but it will contain the categories menu, header, and footer when you view it on the store side. A custom page allows you to create specific content on your website that is completely customized. Getting back to the WYSIWYG editor, once you’ve clicked on the Custom Pages link, My Custom Pages will appear (See Picture-2). This area allows you to add new pages, and when they have already been created you can edit or delete existing pages.
In order to view the editor we must first create a new custom page, so go ahead and click the New button. Once clicked the screen will refresh and you will see the Edit Custom Page screen (See Picture-3). Here you can give the page a title, something that will appear at the top of the page (See Picture-4). The Name in Menus field will be displayed within the footer menu if you check the box at the bottom of this screen, “Show In Bottom Menu” (See Picture-5). In the middle of this screen you will see the “Content:” area, which contains the WYSIWYG editor. The editor contains a large box that out of the box holds texts, “Add Text or HTML Here.” As you add text, images, tables, etc. to this area the WYSIWYG editor is simultaneously writing the HTML code for you behind the scenes. To view the code, or directly add your own HTML, switch the view from Design (tab located at the bottom of the screen) to HTML (see Picture-6).
Now that we’re viewing the editor, let’s break down each button into what it can do for you, here we go! Please note: if you hover your mouse over the button for a few seconds a tooltip with a button title will appear with a handy keyboard shortcut.
Print button – Click this button to print the content of the WYSIWYG box (directly below the 3 rows of buttons)
Spell Checker button – Click this button to scan the text within the box for spelling errors. Incorrect text will have a squiggly red line underneath. Right click over the text to see suggestions for correct spelling.
Find & Replace button – When clicked a new window will pop up. Here you will see two tabs at the top, the Find tab and the Replace tab. Within the Find tab you are able to type text into the Find field and click the Find button. Your text box will be searched and matches will be highlighted within the text box. The Replace tab will provide you with options to Find text and Replace it with different text. You may also utilize the Replace All button which will replace all findings with your replacement text. This button can be very helpful when working within the HTML area of the WYSIWYG editor.
Select All button – When clicked all the objects within the editor will be selected for you.
Cut button – When objects within the editor area are selected and this button is clicked they will be cut or removed for you.
Copy button – When objects within the editor area are selected and this button is clicked they will be copied to the pasteboard.
Paste button – When items have been copied to the pasteboard and this button is clicked those items will be pasted into the editor area.
Paste Options – When the down arrow is clicked you will see additional options such as, Paste from (Microsoft) Word, strip font, Paste Plain Text, Paste As HTML, Paste HTML.
Undo button – When clicked the last action taken will be undone.
Redo button – When clicked the last action taken will be redone.
Image Manager – As previously discussed in December’s article the Image Manager is an area where you can upload and use images on your website.
Document Manager – When clicked a new window will popup allowing you to upload (.doc, .txt, .docx, .xls, .xlsx, and .pdf) files to your website.
Flash Manager – When clicked a new window will popup allowing you to upload .swf files to your website.
Media Manager – When clicked a new window will popup allowing you to upload .wma, .wmv, .avi, .wav, .mpeg, .mpg, .mpe, .mp3, .m3u, .mid, .midi, .snd, .mkv to your website.
Template Manager – When clicked a new window will popup allowing you to upload .html or .htm files to your website.
Hyperlink Manager – Select an object or text you’d like to link and when clicked a new window will popup. Within this window there are three tabs, the first tab, Hyperlink, allows you to type the URL (web address) you would like to link to. The Link Text field allows you to type the text that will be linkable. The Target drop down menu allows you to choose how the link will work, whether it will open in the same window or a new window. The Existing Anchor drop down menu options will only appear if you are editing an existing hyperlink. The Tooltip field allows you to type text that will appear when your mouse is hovering over the link. And finally, the CSS Class drop down menu allows you to set an existing style to the link.
The next tab, Anchor, will allow you to add a name to the anchor that will appear on the page. The last tab, E-mail, provides you with an option to create a link that will link to an e-mail address. Here you would type the e-mail address into the Address field, the Link Text will be the text that will appear as the actual link, and the Subject would be what will populate the subject line of the e-mail.
Remove Link – When you have highlighted an existing hyperlink within the WYSIWYG editor and click this button the hyperlink will be removed.
SuperScript – When you have highlighted text within the WYSIWYG editor and this button is clicked that text will become superscripted or raised to the top right and reduced in size.
Subscript – When you have highlighted text within the WYSIWYG editor and this button is clicked that text will become subscripted or moved to the bottom right and reduced in size.
New Paragraph – When clicked this button adds a <P> or Paragraph tag to the code, jumping your cursor to the next line.
Insert Groupbox – When clicked this button will add a groupbox to the text area.
Horizontal Rule – When clicked this button will add a thin horizontal line that will span across the page’s width.
Insert Date – When clicked this button will simply add the date, for example, Friday, January 04, 2013, into the text box of the WYSIWYG editor.
Insert Time – When clicked this button will add the exact time into the text box of the WYSIWYG editor, an example, 10:09:45 AM.
Format Code Block – When clicked a small window will popup with options to Paste source code below.
Paragraph Style – When clicked this drop down menu shows you the different paragraph styles that exist within your style sheet. For example, H1, H2, H3, H4, and H5 tags are the most popular styles, when selected and applied to text will use your style sheet to style them. (Example: make them bold, change color, add an underline, change the font or font size).
Font Name – When clicked this drop down will display the web-friendly fonts that are available.
Real Font Size – When clicked this drop down menu will display a list of font sizes (in pixels).
Set Absolute Position – When clicked this button will set the absolute position of the selected object.
Bold – When text is highlighted and this button is clicked the text will be thickened in weight.
Italic – When text is highlighted and this button is clicked the text will be sloped to the right slightly.
Underline – When text is highlighted and this button is clicked the text will be given a thin line underneath it.
Strikethrough – When text is highlighted a horizontal line will be placed through the middle of the text.
Align Left – When text is highlighted and this button is clicked the text will be aligned to the left of the text box.
Align Center – When text is highlighted and this button is clicked the text will be aligned to the center of the text box.
Align Right – When text is highlighted and this button is clicked the text will be aligned to the right of the text box.
Justify – When text is highlighted and this button is clicked the text will be aligned evenly along both the left and right margins. Justifying text creates a smooth edge on both sides.
Remove Alignment – When text that has been aligned (either left, right, center or justify) is highlighted and this button is clicked the alignment option will be removed.
Indent – Simply place the cursor at the start of a paragraph of text and click this button to have the text indent the same distance as a tab.
Outdent – This button can be used to remove the indent. Simply click on the line you would like to remove the indent and click this button.
Numbered List – Highlight text and each new line will have a number added to the start when you click on this button.
Bullet List – Highlight text and a bullet will appear at the start of each new line when this button is clicked.
Show/Hide Border – This button allows you to turn on or off the border around a table.
XHTML Validator – When clicked a new window will popup with options.
Foreground Color – Select text and click this button to change the text color.
Background Color – Select an area within the text box and click this button to set the background color.
Apply CSS Class – This drop down menu will display the CSS classes available to you from your style sheet. Highlight text and then select a class to apply to it.
Format Stripper – This drop down menu provides some options regarding removing all formatting to the objects/text you’ve placed inside the text box area of the WYSIWYG editor. You may choose to remove all formatting, all css formatting, all font formatting, all span elements, all (Microsoft) Word formatting.
Insert Symbol – When clicked this button will expand to display several symbols that will be added to your text box if you choose to.
Insert Table – When clicked this button will expand to display boxes in a grid formation. Mouse over the amount of boxes you would like to fill your table with and then click. This handy tool will create a table with the amount you’ve selected.
Insert Form Element – When clicked this button inserts form elements from a drop down list.
Insert Code Snippet – When clicked this button inserts pre-designed code snipits.
Image Map Editor – When clicked a new window will popup giving you options regarding making an image into an image map. First you must choose an image, click the Image Manager button to the right of the field Choose Image. Once you have selected an image it will preview to the left. Next select the shape area, either Rectangle or Circle and click the New Area button. Once clicked, a new shape will appear on top of the previewed image. You may move the shape by clicking and dragging it. Below the Select Area Shape section there is Define Area Properties. This area allows you to control the newly added shape. You can set a URL so that when a mouse clicks on the area of the image it will activate the link. Next you set the link’s target and alternate text. When completed click the OK button and your image map will be setup. This tool is helpful for those who would like to create image maps that do not have other means to do so.
Custom Links – When clicked this button will insert a pre-defined link.
Convert to Lowercase – When clicked highlighted text within the editor will be converted to all lower case.
Convert to Uppercase – When clicked highlighted text within the editor will be converted to all upper case.
Zoom – This drop down menu will display different percentages for you to zoom either in or out of the text box area of the WYSIWYG editor. 100% will be the default.
Module Manager – When clicked this button will activate or deactivate modules from a drop down list.
Toggle Full Screen Mode – When clicked the WYSIWYG editor will fill the browser window and you will no longer see the admin area of Stamp Shop Web. To go back, simply click the button again.
At the bottom of the text box area you will see three tabs, Design, <>HTML, and Preview. As a default the Design tab will always be active when you begin using the WYSIWYG editor. To view and work with HTML instead of the Design view, click the <>HTML tab. This is helpful if you have already designed your custom page using another program and have the HTML code handy, you can simply paste all HTML code inside the HTML area and click save changes. Another helpful tab is the Preview tab, when clicked you will see a preview of what your designs will look like when viewed within the store side.