StoreCenter Help : Stores, Microstores and Storefronts : HTML WYSIWYG Editor
HTML WYSIWYG Editor
The HTML WYSIWYG Editor is used to format the content of your storefront pages, product descriptions and other content.
*Choose Stores >Pages and click the Edit button at the top of any of the individual Pages tabs to open the Editor.
OR
To edit the description of a product, choose Products > Edit Description.
The HTML WYSIWYG Editor is used at various other locations in StoreCenter to format text.
TIP: Consult a HTML reference guide for more information about the general HTML settings.
Many of the commands are similar to those used in popular word processors, but remember that you are creating HTML pages and certain limitations apply. The Editor hides the HTML code in the normal view, however, more advanced users can switch to the HTML mode to edit the code.
Commands are chosen from the menus on the menu bar. Some commands can also be applied by clicking tool icons on the toolbar. An overview of the main commands is given in the next section.
NOTE: The formatting you see in the HTML WYSIWYG Editor does not always correspond with the actual formatting of the storefront page. You must preview your pages on the storefront to be sure the expected results are obtained.
View Options
*With the editor open, choose View to select the optimum editing environment:
•Show blocks: displays dotted lines around the HTML blocks (p, h1, h2, ol, ul, etc.)
•Visual aids: displays cues to indicate certain HTML elements (e.g. when you add an anchor)
•Preview: an impression of what the page will look like on your storefront
•Full Screen: opens the editor outside the Edit Page dialog; choose this option again to return to the Edit Page dialog and save your page
Figure 7.74: HTML WYSIWYG Editor overview
1 Menu bar
2 Toolbar
3 Page content with Show Blocks selected
4 Status bar with tag path
Styles
It is recommended to use styles to format your pages as they add standard HTML tags to your content for font color, size and other properties.
*Position the cursor in a paragraph (no need to select text) and choose Format > Formats on the menu bar. The following styles are available:
*Choose Tools > Source Code to see the HTML code.
TIP: Choose Format > Clear Formatting if you want to reformat selected text from scratch after applying styles or adding your own HTML code. This may be necessary if the formatting on the actual web page is not what you expected.
In Source Code mode you can add your own formatting to the HTML code of the page.
Figure 7.75: The source code of a blockquote with store colors applied in-line
Paragraph Formatting
*Position the cursor in a paragraph and click one of the formatting tools to apply the following formatting to the entire paragraph (no need to select text):
•left, center, right alignment and justified alignment
•bullet lists and numbered lists
Inline Formatting
*Select the text you want to format, and choose Format on the menu bar to apply in-line formatting to the selected text. Bold and italic can also be applied from the toolbar. The following in-line styles are available:
•bold, italic, underline, strikethrough, superscript, subscript
*To remove in-line formatting, choose Format > Clear formatting.
Cut, Copy and Paste
You can use the standard commands and keyboard shortcuts, CTRL+X (cut), CTRL+C (copy) and CTRL+V (paste), to cut, copy and paste text within the HTML WYSIWYG Editor. These commands can also be found on the Edit menu.
Choose Edit >  Paste as Text, when pasting from another application and you want to be sure all the formatting is cleared.
NOTE: Selecting Paste as Text turns on this mode until you choose Edit >  Paste as Text again.
Hide content on small screens
If you have set up a responsive storefront, you may want to hide certain page content all together on small screens. To do this, switch to Source Code view and apply class=”hidden-xs” to the content you want to hide.
Figure 7.76: The hidden-xs class applied to hide content
All content with this class is hidden on small screens.
Insert/Modify a Table
1 Position the cursor where you want to insert a table.
2 Choose Table > Insert Table, and select the number of rows and columns by dragging your cursor across the grid.
The table is inserted; you can drag the handles to increase the height and width of the table.
The Insert/Modify Table dialog is displayed where you can define General and Advanced Properties. Many of these are general HTML settings.
TIP: Consult a HTML reference guide for more information on HTML tables.
3 Choose Table > Table Properties to display the Table properties dialog where you can set overall table properties such as cell spacing, padding, etc.
On the Table menu, you have extensive controls to add/delete rows and columns, merge cells, etc.
4 Click in each cell to enter the data.
5 Click Save to confirm your changes.
Preview your storefront page and open the HTML WYSIWYG Editor again to modify the table as required.
6 To modify the table, position the cursor in the table, choose Table > Table Properties, and fine-tune the table settings.
Links and Hyperlinks
You can link to products, categories and other storefront pages, or create hyperlinks to external websites.
Insert/Edit a link 
1 Select the text you want to assign a link to and click the Link tool or choose Insert > Insert Link.
The Insert Link dialog is displayed:
StoreFront Links
Choose a product page, a category page or one of your storefront pages that you want to link to. The page URL appears in the Link URL field.
URL
Enter a website URL with the https:// prefix, e.g. https://www.mywebsite.com.
Text to display
The highlighted link text.
Target
Choose whether the target page must open in the same browser window or a new window.
2 Click OK.
The link text is displayed in the secondary color and underlined.
3 Click Save.
NOTE: To remove a link, select and delete the link text.
Anchors
If you have long pages, an anchor can be used to insert a link to a specified location on the same page or on a different page.
Insert/Edit an anchor 
1 Select the text that you want to link to.
2 Choose Insert > Anchor.
The Anchor dialog is displayed.
3 Enter an anchor name, e.g. my_anchor.
4 Click OK.
An anchor is inserted on the page and you can now create a link to this anchor from another location on the page or from a different page.
5 Select the text you want to assign a link to and click the Link tool.
The Insert Link dialog is displayed.
6 For links on the same page, enter the anchor name preceded by the hash (#) symbol, for example #my_anchor, in the Link URL field.
OR
For links to an anchor on a different page, select the page in the Link List field and append the anchor name preceded by the hash (#) symbol to the end of the URL in the Link URL field.
7 Click Save.
Insert/Upload Images
Inserting images is a two-step procedure that consist of uploading new images to the StoreFront server and then inserting the images on the pages as required.
Insert an image 
1 Position the cursor where you want to insert the image and click the Insert/Edit Image tool.
The Insert/Edit Image dialog is displayed.
2 Click in the Image List drop-down list and choose the image you want to insert.
NOTE: The list is empty if no images have been uploaded.
OR, if the Image List is empty
Click the browse button next to the Source field and upload an image to the StoreFront server. Repeat this step for as many images as you want to add to the list. The uploaded images are now included in the Image List.
3 Select the image you want to use from the drop-down list.
4 Enter a description of the image; this description is displayed if the image fails to load on the page (alt attribute).
5 Specify the dimensions for displaying the image in your document, and whether you want to constrain the proportions. The native dimensions of the image are entered by default.
6 Click OK.
7 Click Save.
Insert Video
Insert/edit a video 
1 Position the cursor where you want to insert the video and choose Insert > Insert Video.
2 Paste the code that points to a video, for example a video hosted on YouTube.
3 Click Save and view your page to check that the video plays as expected.
4 To edit an existing link to a video, highlight the video in your document and choose Insert > Insert Video.
Special Symbols
The HTML WYSIWYG Editor includes a powerful feature for inserting special characters and symbols.
Insert custom characters 
1 Position the cursor where you want to insert the custom character and choose Insert > Special Character.
The Special Character table is displayed.
2 Click the character you require to insert it in your text.
3 Close the dialog.
HTML Mode
Choose Tools > Source Code to switch to HTML mode to view and edit the HTML code of your pages. You may want to:
•paste content in HTML from another editor
•add complex content such as special tables
•enhance the styling of the page you created initially in the HTML WYSIWYG Editor
 
Figure 7.77: Example: Image with default left alignment and padding-right: 5px added to style in the HTML code;
To avoid unpredictable results, only work in this mode if you understand HTML.
NOTE: When you switch back to the WYSIWYG view, unsupported code and syntax errors are replaced by supported code or deleted.
 
doc. version 6.0.4