The most powerful tool for the Content Authors – Rich Text Editor

Image

 

RTE 1

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) [caption id="attachment_2427" align="alignnone" width="391"]

RTE default

RTE Default[/caption] [caption id="attachment_2440" align="alignnone" width="755"]

RTE Medium.png

RTE Medium[/caption] [caption id="attachment_2441" align="alignnone" width="884"]

RTE IDE

RTE IDE[/caption]  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 functionsFunctions that work like in MS Word

Icon

Function

What does it achieve!

 

Print

Print

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

Find and Replace

This functions in the same manner as the Find and replace functionality works in MS Word.

 

Cut

Cut

This function cuts the content and copies it to the clipboard. We can also use the CTRL+X command for this.

 

Copy.PNG

Copy

This function copies the content to the clipboard. We can also use the CTRL+C command for this.

 

Paste.PNG

Paste

This will paste the content last copied to the clipboard. We can also use the CTRL+V command for this.

 

Undo.PNG

Undo

This will undo the last action performed. We can use the key command CTRL+Z

 

Redo.PNG

Redo

This will redo the last action undone. We can use the key command CTRL+Y.

 

bold italic underline

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

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 list

unordered list.PNG

Ordered and unordered list

These icons help create numbered text or bulleted points within the content respectively.

 

Indent.PNG

Outdent.PNG

Indent and Outdent

These functions help to indent or outdent the content respectively as in MS Word

 

strikethrough

Strikethrough

This function will cross the selected content out by drawing a line through it.

 

subscript and superscript

Subscript and Superscript

This allows us to subscript or superscript the selected content.

Foreground and background colour.PNG

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

Spellchecker

Works in the same way as in MS word, the incorrect spellings get highlighted and the option for correction is also available

 Other Functions

Icon

Function

What does it achieve!

 

Paste from word.PNG

Paste from Word

This will paste the content copied from the word including all formatting, styling, links etc.

 

Paste from word - strip font

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

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

Paste as HTML

This will paste the copied content in the form of HTML.

 

Format Stripper

Format Stripper dropdown

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

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

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 item.PNG

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

Hyperlink Manager

Hyperlink Manager allows us insert external links and anchor links within the content.

 

remove hyperlink.PNG

Remove Link

This helps us to remove a link (both external as well as sitecore link) from the content.

 

Insert table.PNG

Insert table dropdown

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

Insert Form element dropdown

Insert Form Element

This allows us to insert a form elements like a button, checkbox, radio button etc

 

Insert new paragraph

Insert a Paragraph

Hitting this icon will start a new paragraph in the content

 

Insert date.PNG

Insert date

This will insert the date in the format mm/dd/yyyy

 

Insert symbol

Insert symbol dropdown

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

Insert time

This will insert the time in the format it is set on the system.

Insert Code Snippet.PNG

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

Media Manager

Allows you to manage the Media library. We can upload, delete or rename Media items there as needed

 

Flash Manager

Flash Manager

Helps you to manage the Flash files in Media library.

 

Horizontal Rule

Horizontal rule

This function will insert a horizontal line across the content.

 

select all

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

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 borders

Show/Hide border

This function helps to unhide or hide the borders of the table

 

Module Manager.PNG

Module Manager dropdown

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

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

Help

Has the list of all the functions on the RTE and a brief description of it.

 [caption id="attachment_2549" align="alignnone" width="359"]

Paste from word - diff ways

Image 1: Difference between output from “Paste from word”; “Paste from word, strip font" and "Paste as plain text"[/caption] [caption id="attachment_2552" align="alignnone" width="1008"]

ol li using html code snippet

Image 2: Inserting predefined html code snippet for ol li[/caption] [caption id="attachment_2555" align="alignnone" width="1198"]

word and character count

Image 3: Statistics showing word count and character count[/caption] [caption id="attachment_2557" align="alignnone" width="1200"]

Tag inspector

Image 4: Tag Inspector[/caption] [caption id="attachment_2565" align="alignnone" width="1200"]

properties inspector

Image 5: Properties Inspector[/caption] [caption id="attachment_2568" align="alignnone" width="1202"]

realtime html view

Image 6: Real-time html view[/caption] 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.Happy Learning!