A WYSIWYG Editor, is a tool that allows you to design your site without having to know HTML. It's an acronym for "What You See Is What You Get", meaning whatever you enter into the WYSIWYG should be pretty much what shows up on the site, with few exceptions. It has tools built in to insert images, links, change font size, etc., which are comparable to the tools you use for formatting in Microsoft Word.
Pinnacle Cart has a WYSIWYG built-in tool provided by TinyMCE. It can be used in Cart Designer, Product Descriptions, and Category Descriptions. Let's take a look at where and how it's used.
Note: The WYSIWYG in Cart Designer has a few more options than the one used on Product and Category descriptions. This includes the ability to change font size and style. For Products and Categories, font size and style should be controlled by CSS.
Applies to Version(s): 3.7.X - 3.8.0 Series
In this article, you will learn:
How to Access the WYSIWYG in Cart Designer
How to Access the WYSIWYG in Product and Category Descriptions
How to Access the WYSIWYG in Cart Designer
Note: Only three sections of your site can be edited via the WYSIWYG; the header, the footer, and the center home page section.
1. First, access your admin area.
2. Click Design > Cart Designer.
3. Again, the only three areas you can use the WYSIWYG on are header.html, footer.html, and home.html. You'll know whether you're editing one of those sections if you right-click and see an option for WYSIWYG Editor.
How to Access the WYSIWYG in Product and Category Descriptions
Click Products on the left menu > Products >. Then click an existing product to edit it the option to add a new product. In the Description section, you will see the WYSIWYG tools.
It works pretty much the same for Categories. Click Products > Categories > to edit or add an existing Category and you will see the WYSIWYG in the Category Description section.
WYSIWYG Tools
Next, we'll look at each section of tools in the WYSIWYG and learn how each tool works.
Font Formatting Tools
Bold - This will make any text that you highlight bold.
Italic - This will make any text that you highlight italic.
Underline - This will underline any text you highlight.
Strikethrough - This will strikethrough any text that you highlight.
Superscript and Subscript - A Superscriptexample will add a character to the top left of another character. Subscriptexample will add it to the bottom right. To use this correctly, type the super or subscript next to the previous word without space. Highlight the super or sub and click one of those two options.
Font Sizes - This will allow you to change the text size of the highlighted text.
Font Color - This will change the color of the font to a color of your choice for highlighted text.
Font Background Color - This will add a background color to highlighted text. This is good for permanent highlighting.
Paragraph Tools
Paragraph Formatting - These are your typical formatting options for paragraphs. You have options for left alignment, center alignment, right alignment and justify.
Bulleted List - This will allow you to create paragraph lists with different bullet types; Default, Circles with No Fill, Discs (same as Default), or Squares.
Numbered List - This will allow you to create lists with numbers, letters, roman numerals, etc.
Increase and Decrease Indent - This will push the text to the right or left.
Increase:
Decrease:
Editing Tools
Editing Tools - These are your typical Cut, Copy, and Paste tools.
Images and Links
Link - This will create a link out of any text that you've highlighted. When clicked, it will pop up an Insert Link box. See the details of each below:
- URL: You can insert an external link, for example http://www.google.com. Or, you can link to a file on your server. This would be a great way to link to things like PDF files. Just click the search icon, and use the Moxie Manager to navigate to the file to select it.
- Text to Display: This is the text you've highlighted to link.
- Title: This is a title tag, which is good for SEO so fill it in!
- Target: If you choose New Window, the link will open in a new window. If None, then it won't.
Remove Link - This will disable links you've highlighted.
Anchor - This will create a spot anywhere in your text which can be linked to. Once used, you can then use the link option above and a new field will appear for Anchors. You would link that text to an anchor you've created.
Insert/Edit Image - This will allow you to add an image to the spot your cursor is located. You can learn a lot more about this here, Adding an Image to Your Site Using the WYSIWYG Editor.
Insert/Edit Video - This will allow you to add or edit video, similar to images above. Just follow the same directions when adding videos.
Others
Horizontal Line - This will add a dark bold line to separate your text. Just place your cursor where you'd like the separation and click the button.
Source Code - This will open up the HTML editor directly. This is great for designers that want the WYSIWYG to do most of the work, but need to be able to tweak HTML for detailed customizations. This would also be what you'd use to add HTML or Embed code from other sources.
Clear Formatting - This will clear all changes you've made with the WYSIWYG Editor.
Note: Clear Formatting will also clear out any formatting that may have been copied into your WYSIWYG from other sources, such as Microsoft Word.
Links to Related Articles
Adding an Image to Your Site Using the WYSIWYG Editor
If your question wasn't answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.
