Ecommerce Online Store - Videos and Utilities - WYSIWYG Editor

The software utilizes a WYSIWYG (What You See Is What You Get) editor that gives you the ability to enter text, images, charts, and other files in long descriptions and other areas of your store without having to know complex HTML code.

Note: Advanced code like Java and CSS do not render in the WYSIWYG and should be placed directly into the HTML.

The WYSIWYG Buttons

There are several buttons on the WYSIWYG editor. To find out what a button does, hover your mouse pointer over the button and a tooltip will appear explaining the button.

View HTML/View Editor Button

At the top of the WYSIWYG is the View HTML/View Editor button. You can quickly switch between the text editor and the HTML editor by clicking this button.

• Full Screen – Opens the WYSIWYG in full screen mode.
• Undo – Undo your last action.
• Redo – Redo your last action.
• Foreground Color – Change the color of the font.
• Background Color – Change the background color.
• Hyperlink – Insert a hyperlink in your text. Clicking on the button will open the hyperlink popup.

• Image – Insert an image. Clicking on the button will open the Insert Image popup.

• Path – The URL of the file. This path should be relative and refer to images already uploaded to your site. You can also click the Folder button to be taken to Advanced Image Upload to select images already in your store or located on your computer or network.
• Title – Alternate text that your customers will see when they hover their mouse pointer over your image.
• Alignment – Select where your image is placed.
• Border – Specify the type of border your image uses.
• Width & Height – Specify the width and height of your image.
• Spacing – Specify the spacing around your image.
• Flash – Insert a flash movie. Clicking on the button will open the Insert Flash popup.

• Media – Insert non-flash media, such as a movie.

• Insert Table – Insert a table. Clicking on the button will open a grid on which you can specify how many rows and columns your table will contain.
• Edit Table/Cell – Edit the entire table or a selection of cells.
• Absolute – Utilize absolute positioning.
• Special Characters – Insert a special character.
• Line – Insert a horizontal line.
• Remove Formatting – Remove the formatting of the selected section.
• View/Edit Source – View the source html of the WYSIWYG content.
• Paragraph – Change the paragraph style of the selected section.
• Font Name – Change the font type of the selected section.
• Size – Change the font size of the selected section.
• Bold – Make the current selection bold.
• Italic – Make the current selection italic.
• Underline – Make the current selection underlined.
• Justify Left – Justify the current select to the left margin.
• Justify Center – Justify the current selection to the center.
• Justify Right – Justify the current selection to the right margin.
• Justify Full – Justify the current selection to the full width.
• Numbering – Insert a numbered list.
• Bullets – Insert a bulleted list.
• Indent – Indent the selected section.
• Outdent – Outdent the selected section.

The WYSIWIG editor allows you to insert images into your text or html. You can specify the alignment, the border, the pixel spacing around the image, as well as the size of the image itself in the Image Insert popup.

How to Add an Image using the WYSIWIG

1. Click the Image button in the WYSIWYG. This will open the Image Insert Popup box.

2. Click the folder icon next to the Path text box. This will open the Image Manager

3. You can navigate to the image if it is currently in your store with the folder drop-down on the right. Or you can upload a new image to use by clicking the Browse button and then the Upload button to move the new image to a folder list on the right.

4. Choose your desired image and click the Select button. This will return you to the WYSIWYG editor.

5. Navigate to the bottom of the page and click the Save or Save & Return button to save your WYSIWYG changes.