What's on this page?
The majority of Tendenci's content description or body fields have what we call a "WYSIWYG" menu consisting of icons like the one you'll see in the screenshot below:
WYSIWYG --> "What You See Is What You Get", pronounced "wiz-ee-wig"
This help file is intended to describe what each of the icons does so you can use the WYSIWYG (aka Rich Text Editor menu) to format your website's pages so the text and images look professional and are easy to read.
Tendenci uses the open source software called TinyMCE, which is one of the most widely used WYSIWYG editors, and so you'll probably see these icons as options in other web applications besides your Tendenci site. Our intent with this guide is to help you familiarize yourself with the icons so you'll know how to use them on any Internet application you run into.
Defining the Icons with Examples
We've split the WYSIWYG menu icons into sections below, with screenshots and then examples of different formatting options for text, graphics, and hyperlinks available for you to use. There are some short videos for some of the examples that demonstrate using the WYSIWYG options to show you how they work in action.
We'll start with the top row of icons and work from left to right, then drop to the second row and again, go left to right.
The Top Icons
The Icon Sets we'll demonstrate from the top row consist of the following 6 groups:
1) Text format options to make your text bold or italicized using these 2 Icons:
Watch this short video clip to see how you use these WYSIWYG icons:
2) Create bullet or numbered lists and tables with this icon set. The 2 on the left with the 3 horizontal lines are for making lists, and the 3rd icon is used to create new tables.
Watch and learn how to make bullet and numbered lists with your Tendenci WYSIWYG:
3) Align your text to the left, center, or right side of the page with these WYSIWYG icons:
Watch this video to learn how to align your text and images left, right, or center on the page:
4) Select text and make it either a hyperlink to another web page, or a mailto: address that sends an email using the icons that look like a chain link and a broken chain.
Create Hyperlinks and Email Address Links inside Your Pages:
Update: In T7 2017 sites, we added a new feature for creating buttons. When adding a link, use classes to create a "Primary Button" or "Default Button" that is defined in your website's theme!
These look like regular links in the Wysiqyg Editor but will display on your site as Buttons!
5) Upload files and images and embed them in your web page using the Media Uploader icon.
When you click on the icon to attach Media files, the uploader window will pop-up!
6) You can upload PDFs by creating a link.
7) Use the fullscreen icon to pop-up a full screen editor view of the page
8) Click the "Source Code" icon to pop-up a window for editing the HTML version of your page.
This video shows you how the HTML icon gives you access to an html editor:
More Formatting Options
9) The dropdown menu with options including Format and Paragraph let's you select text and change it's formatting. You would use this icon for formatting different blocks of content on your page such as your headers (H1, H2, H3...) for section titles, as well as other, custom formatting options like paragraph text and addresses. This tells accessibility readers and search engine crawlers key details about the importance of each block of text so it can identify chapter headings and keywords better.
Watch this video clip to see the dropdown format icon in Action!
10) Align Full and Font Color Change Icons:
The Align Full icon will "stretch" the selected content across the full width of the page. You'll use the Color Change icon to select and change font colors within your content.
Here's a video that shows you how the Align Full and Font Color Change icons work:
11) Indent and Outdent icons make it easy for you to quickly indent or outdent blocks of content.
Here's a demonstration of the Indent and Outdent icons:
12) The final pair of icons on the WYSIWYG are the Undo and Redo buttons. These buttons allow you to undo the last change you made, or redo a change after you use the "undo" icon. These icons will become highlighted when they're available for using, and will "fade" or dim if you don't have anything you can Undo or Redo.
Click on the video to see how to use the Undo and Redo icons:
13) Here is how you can clear strange formatting on your text whenever you paste into the text editor.
Do not copy from a Word processor and paste directly into the T7 text editor (WYSIWYG). What you'll get is strange and inconsistent formatting whenever you save your results. Instead use the "Paste as text" to prevent extra formatting and styles from carrying into the editor.
1. Edit
2. Paste as text
3. You'll then recieve a pop-up saying the following: "Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off."
4. To toggle off the "Paste as text" go through steps 1 -2 to toggle off the option.