How to Use the WYSIWYG Editor

One of the most common inquiries we receive is about how to use the WYSIWYG Editor.
Here is a comprehensive guide.

Applies to Version(s): 3.7.X - Current

A WYSIWYG Editor, is a tool which 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 pretty much be 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 tool built in, and 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.

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.

First, access your admin area.

Click Design > Cart Designer.

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 sub script next to the previous word without a 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 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 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.

The Rest.

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.

Was this article helpful?
1 out of 1 found this helpful