Formatted Text Component

What is it?

Formatted text component gives the ability to your users to create content with the help of a rich text editor. The component provides you with easy control in styles and formatting, font, paragraphing and editing. 


When do I use it?

You can insert the formatted text component anywhere in the layout. As, the formatted text component is a rich text box, you can use various styles to give your text an outstanding look. You can also add images and videos within the rich text box.


The icons in the formatted text are explained below:



  • Bold - This icon applies the Bold style to the selected text.
  • Italic- This icon applies the Italic style to the selected text.
  • Underline- This icon applies the Underline style to the selected text.
  • Strikethrough - This icon applies the Strikethrough style to the selected text.
  • Colors - This icon provides a list of colors to be applied either to a text or to the background.
  • Clear Formatting - This icon clears the formatting from the selected text.
  • Paragraph Format -  This icon provides a list of styles to be applied to the highlighted text.
  • Quote - This icon provides a list of increase and decrease style that can be applied to the text.
  • Align - Left: This icon aligns the text to the left side of the component boundary.

                         Center: This icon aligns the text to the center of the component boundary.

                         Right: This icon aligns the text to the right side of the components boundary.

                         Justify: This icon Justify the text.

  • Ordered list - This icon creates an indented ordered list.
  • Unordered list - This icon creates an indented bullet list using the standard bullet item.
  • Decrease Indent - This icon removes the indent from text if there is any.
  • Increase Indent - This icon adds indentation to the text.
  • Insert Link - This icon allows the user to link either to an external URL or to the GreenOrbit content.
  • Insert Anchor - This icon adds an Anchor point to the page at cursor's location. This Anchor can be used at other locations (within the same page) to link directly to the anchor location.  To link the anchor location, create a Hyperlink URL for the selected text, in the insert link tab create a Hyperlink URL for the selected text and in the 'Text' field add the anchor name, for example 'my anchor name' would be entered as #myanchorname.


  • Insert Image - This icon helps the user to add images to the page layout. The source of the image can either be an external URL or a file in the local system. To modify the image, click on the image and a context menu will load (as shown below) allowing the user to modify properties accordingly.
  • Insert Video - This icon provide the ability to insert a video to the page layout. The source of the video can be an external URL, embedded code or a file in the local system. 
  • Upload File - This icon provides the user with a facility to drop and upload a file located in the local system. 
  • Insert Table - This icon allows the user to insert a HTML table that can be modified in terms of table, columns and rows.
  • Insert Horizontal Line - This icon allows the user to insert a horizontal line below the selected text.
  • Special Characters - This icon gives a list of special characters that a user can use in the formatted text cell. 
  • Undo - This icon allows the user to undo their previous action.
  • Redo - This icon allows the user to redo their previous action.
  • Code View - This icon gives the code view of the content added in the formatted text component.
  • Fullscreen - This icon allows the user to have a full view of the Formatted cell component.


To add the Formatted Text component to a site layout 

Note: you need to have a Security level of Contributor or higher in order to edit a layout.


1.Navigate to the site where you want to add the formatted text.

2. From the top toolbar select Edit>Live and then select Components.

3. From the Add Components list, click Formatted text and drag to the required location on your layout.


Set Properties for the Formatted Text component

You can select the formatted text and edit the spacing around it to change how it looks in your layout.


1. In the layout, click the Formatted Text component, the properties are displayed on the left.

2.Click the Edit button.

3. Heading- you can give a component heading which is optional and if you leave it blank the heading won't be displayed.



4. Increase or decrease the padding as required.

5. Click Save.