Back to:
Language: EN

Help Categories

Using the WYSIWYG editor

The WYSIWYG editor is utilized when creating Rich Text Pages, forms and product descriptions. It is rich in tools and in this article we are going to go through each of them.
Using the WYSIWYG editor enables you to create the look and feel of the page by choosing different fonts, font sizes, font and background colors and embedding different elements.

1. Go to Store - Products

2. Click New Product

3. You can use the WYSIWYG editor to enter brief or detailed product description, so click one of the options

4. The WYSIWYG editor appears in front of you. Click the "Switch to plain text" link to turn on regular text input area.

5. Now lets go through each button and see what it does
Source - this button switches between visible text view and source code view

Visible text:

Source code:

The source code is HTML - a markup language that is used for web design. Thanks to the WYSIWYG editor, you will not have to deal with it. Using the editor's buttons automatically creates the HTML markup code around your text.

Save - this button saves the changes you have made until this moment
New page - clear all text and formatting and start fresh
Preview - generates a preview of your document, the way it will be seen in the customer area of the shop.

Templates - Select from a list of predefined formatting templates, single-click one and use it.

Click the button and a templates window will open up. Click the template you've chosen once and it will be inserted in the text area, ready to be used.

This is what happens when the template is inserted. Select the text and replace it with yours.

Cut - removes the selected content and saves it for later use (paste);

Copy - creates a copy of the selected content and saves it for later use(paste);

Paste - inserts a copy of content, previously saved by the Cut or Copy commands;

Paste as plain text - inserts formatted text without its formatting;

Paste from MS Word - inserts text that you have cut or copied from Microsoft Word

Print - sends the document's contents to the printer;
Check spelling;
Check spelling as you type - will underline every word you type if it is not written correctly, right after you've typed it.

Undo - will undo your last action. Very useful if you made a mistake or deleted something accidentally.
Redo - will undo pressing the "undo" button.

Find- opens up a window that allows you to enter a word or a text string and look for it in the text of your document
Replace - opens up a window that allows you to enter a word or a text string to look for in the text of your document and a word or a text string to replace it with

Select all - selects all the content in the document;
Remove format - removes all the formatting of the selected text

Each of the buttons from the following group opens up a window that enables you to create HTML elements:
form, check box, radio button, text field, textarea, drop-down menu, button, button-image or a hidden field.

The next group of buttons enables you to apply bold,. italic, underlined and strike-through styles to your text

Superscript -  mark a word or a digit and click this button in order to place it slightly above the text before it
Subscript -  mark a word or a digit and click this button in order to place it slightly below the text before it

Ordered list - click this button and it will assign an incrementing number to each new line
Unordered list - click this button and it will place a bullet at the start of each new line

Increase indent - indents the text
Decrease indent - decreases text indentation

Align left, align right, center and justify the text

Text direction left to right or right to left

Link - mark some text, click the link button, insert and url address and now the text links to that address
Unlink - mark a link, click this button and the link will be removed. Only plain text will be left
Anchor - create an anchor inside the document

Image - opens up a window that lets you insert an image from your computer or an url address,
Flash - opens up a window that lets you insert a flash animation.

Table - opens up a window which lets you create a table with specific attributes.

Insert table window

Horizontal line - places a horizontal line after the current line

Smiley - opens up a window with a selection of smileys to choose from. Single-click the one you have selected and it will be added to the text.

Insert special character - brings up a list of special characters to choose from

Insert a new line - inserts a new line right after the cursor.

Iframe - lets you insert an iframe in your document

Style lets you choose from a list of predefined styles of formatting text and apply it

Format offers more formatting options

Font lets you choose a font from a list

Size - set the font size

Font color - set the font color

Background color - set the text background color

Show blocks - this button shows the html blocks in the content