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
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 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