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

 

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)

 

RTE default
RTE Default

 

RTE Medium.png
RTE Medium

 

RTE IDE
RTE IDE

 

 

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!
 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 listunordered list.PNG Ordered and unordered list These icons help create numbered text or bulleted points within the content respectively.
 Indent.PNGOutdent.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.

 

Paste from word - diff ways
Image 1: Difference between output from “Paste from word”; “Paste from word, strip font” and “Paste as plain text”

 

ol li using html code snippet
Image 2: Inserting predefined html code snippet for ol li

 

word and character count
Image 3: Statistics showing word count and character count

 

Tag inspector
Image 4: Tag Inspector

 

properties inspector
Image 5: Properties Inspector

 

realtime html view
Image 6: Real-time html view

 

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!

One thought on “The most powerful tool for the Content Authors – Rich Text Editor

Add yours

  1. How do you make the “insert form element” work? I can insert it but then how does it get ‘wired up’ like say, send an email?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: