Update on January 8th, 2024: What version of Tendenci is your website on? Stay updated with Tendenci's latest version here https://www.tendenci.com/life-cycle/. The current tinymce version in T15 is tinymce 6.8. Check out what is new with tinymce at https://www.tiny.cloud.
The release notes for v5.0, v6.0 and v7.0
https://www.tiny.cloud/docs/tinymce/5/release-notes50/
https://www.tiny.cloud/docs/tinymce/6/6.0-release-notes-overview/
https://www.tiny.cloud/docs/tinymce/latest/7.0-release-notes/#overview
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.
** Note: none of the video clips below have audio/sound. They are designed so you can pause them, rewind them, and watch them all in 60 seconds or less. **
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 Row 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, italicised, underlined, or with the strikethrough line using these 4 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:
Watch this video if you want to learn how to create Tables using the WYSIWYG editor:
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:
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!
**Be patient - sometimes you have to wait and click this icon a second time if you don't get a window to pop-up right away. This is due to the changes in Java and Javascript in different web browsers. We recommend Chrome or Firefox browsers for best results.
6) Use the fullscreen icon to pop-up a full screen editor view of the page, and click the HTML icon to pop-up a window for editing the HTML version of your page.
Watch how you toggle between the full screen and the regular view:
This video shows you how the HTML icon gives you access to an html editor:
The Bottom Row Icons
Now we'll cover the bottom row of WYSIWYG icons, going from the left to the right. You may want to note that this help file walks you through the TinyMCE WYSIWYG editor icons in the order that we have them displayed. On other applications using TinyMCE, the icons may be in a different order and you may not see all of these icons. You might even see icons that Tendenci doesn't use. If you get stuck, you can always ask us or check out TinyMCE's website for more information.
7) 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!
8) 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:
9) The next set of icons are for customizing your formatting and making it easier for you to copy text from other documents to save time.
The icons from left to right:
- Paste to Text
- Paste from Word
- Erase Format
- Insert Custom Characters
Here's the Paste to Plain Text and Paste from Word icons in action:
Want to learn how to insert special characters like © and symbols like ♥ into your pages? Then watch this video:
10) 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:
11) 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.