The Rich Text Editor (RTE) is the most commonly and widely used tool by the Content Authors. Although most of the icons are intuitive by nature like in MS Word, have you ever wondered what functions do these icons achieve and how is each function different from the other?
This article explains the function each of the icon serves.
Depending on the kind of access you have, you may or may not see all options listed here.
There are 4 different types of RTE in Sitecore – RTE Default, RTE Medium, RTE IDE and RTE Full. Please note all RTEs (shown below) are subsets of the RTE full (image above)
We shall cover the option of RTE full here.
For clarity the functions here are divided under two heads:
1 – The functions that work like in MS Word
2 – Other functions
Functions that work like in MS Word
|Icon||Function||What does it achieve!|
|This function helps print the content inserted in the field. Even if we do not accept the changes and save before print, it will print all of the content entered.|
|Find and Replace||This functions in the same manner as the Find and replace functionality works in MS Word.|
|Cut||This function cuts the content and copies it to the clipboard. We can also use the CTRL+X command for this.|
|Copy||This function copies the content to the clipboard. We can also use the CTRL+C command for this.|
|Paste||This will paste the content last copied to the clipboard. We can also use the CTRL+V command for this.|
|Undo||This will undo the last action performed. We can use the key command CTRL+Z|
|Redo||This will redo the last action undone. We can use the key command CTRL+Y.|
|Bold, Italics, Underline||These help in formatting the text as bold, italics and underline respectively. Just as the way it is in MS Word.
The Keyboard shortcuts CTRL+B, CTRL+I, CTRL+U will work too respectively.
|Alignment||We can align the content to left, centre, right or justify as needed. The last icon helps eliminate any alignment applied to the content selected.|
|Ordered and unordered list||These icons help create numbered text or bulleted points within the content respectively.|
|Indent and Outdent||These functions help to indent or outdent the content respectively as in MS Word|
|Strikethrough||This function will cross the selected content out by drawing a line through it.|
|Subscript and Superscript||This allows us to subscript or superscript the selected content.|
|Foreground and Background color||Just as the way it works in MS Word, these functions allow us to apply a foreground and background colour to the selected content|
|Spellchecker||Works in the same way as in MS word, the incorrect spellings get highlighted and the option for correction is also available|
|Icon||Function||What does it achieve!|
|Paste from Word||This will paste the content copied from the word including all formatting, styling, links etc.|
|Paste from Word, strip font||This will paste the content copied from the word including all formatting, styling, links but not the font and font size.|
|Paste plain text||This will paste the copied content as plain text, losing all its formatting, styling, links etc
See Image 1 for difference between ‘Paste from Word’; ‘Paste from word, strip font’ and “Paste as plain text”
|Paste as HTML||This will paste the copied content in the form of HTML.|
||Strip Formatting||As the name suggests, this function helps us get rid of diff type of formatting in the content. There are several options under this :
1) Strip all formatting: This will help us get rid of all type of formatting in the content selected.
2) Strip CSS formatting: This eliminates any class applied to the piece of selected content.
3) Strip Font elements: Helps us get rid of any font related attributes like font type, colour, size etc.
4) Strip Span elements: This will remove any span tags in the selected content
5) Strip word formatting: helps to remove the word related formatting like the mso elements
|Insert sitecore link||Helps us to link the content to any of the page or image or a media item in sitecore. Clicking on the icon opens up the dialogue box with the sitecore tree structure and we can select the item we would want to link to the content.|
|Insert Bucket link||If there are bucket items anywhere on the site and need to be linked to any content, it can be done using this function.|
|Insert sitecore media||This allows us to insert a sitecore media item in the content. We will have to first upload the media item (image/file) to Media Gallery.|
|Hyperlink Manager||Hyperlink Manager allows us insert external links and anchor links within the content.|
|Remove Link||This helps us to remove a link (both external as well as sitecore link) from the content.|
||Insert Table||WE can use either the table grid or the table wizard to insert and format the table as we like. We can also set the table properties as required. Video here explains it in detail.|
||Insert Form Element||This allows us to insert a form elements like a button, checkbox, radio button etc|
|Insert a Paragraph||Hitting this icon will start a new paragraph in the content|
|Insert date||This will insert the date in the format mm/dd/yyyy|
||Insert symbol||This helps us to insert a symbol as a part of the content. We can insert symbols like — – © ® ™ $ € £. If we want more symbols in options, the developer should be easily able to do it for us.|
|Insert time||This will insert the time in the format it is set on the system.|
|Insert Code Snippet||This helps us to insert a predefined HTML code snippet into the content. When we are supposed to write the content for different pages that looks the same in terms of layout but is different only with the text (Different product pages for example), we should consider adding a predefined HTML snippet.
The HTML code snippet can easily be defined by the developer in Core database at /sitecore/system/Settings/Html Editor Profiles/Rich Text Full/Snippets
For example: Inserting the predefined Ordered list snippet helped me to insert numbered bullets as shown in Image 2.
|Media Manager||Allows you to manage the Media library. We can upload, delete or rename Media items there as needed|
|Flash Manager||Helps you to manage the Flash files in Media library.|
|Horizontal rule||This function will insert a horizontal line across the content.|
|Select all||Will select all of the content in the RTE. We can also use CTRL+A on keyboard to achieve this|
|Set absolute position||This function allows us to set the position of an element to absolute. A point to note here is this works only in IE.|
|Show/Hide border||This function helps to unhide or hide the borders of the table|
||Module Manager||Module Manager – Activates /Deactivates modules from a drop-down list of available modules.
Statistics: activating this module will show showing the Words and Character count at the right bottom of the RTE. See Image 3
Tag Inspector: activating this is will display the html tag of the content selected or where the cursor sits as shown in Image 4
Properties inspector: AS the name suggests, activating this module will display in the bottom of RTE the properties of the selected media item. See Image 5
Real-time HTML view: Activating this will display the html part for the entire content at the bottom of the RTE. See Image 6
|XHTML Validator||Validates the html code for the content in the RTE and throws the results (pass/fail) along with the list of errors found|
|Help||Has the list of all the functions on the RTE and a brief description of it.|
Rich Text Editor is, thus, an amazing tool for the content authors. However, one of the most common mistakes we make is skipping the html view completely while working on the design mode in the RTE. A look at and a generic understanding of html mode is highly recommended too.
A simple tutorial to understanding html can only put us in better position.