The Formatted Text Component is used to create page content using a rich text editor. The rich text editor draws on the styles and formatting defined by the iD Theme and provides users with the following groups of controls:

• Styles and Formatting
• Paragraphing
• Font
• Rich Content
• Editing

The Formatted Text Component allows users to create, edit and maintain formatted textual content. The advantages of using this component are:

• Consistent content creation
• Standardized styles and formatting
• Easy to use rich text editor

This page explains the following:

• Editing Content 
  • Copy/Paste Options 
  • Styles & Formatting 
• Component Properties 
• Instructional Video 

Additional Formatted Text component functionality:

• Adding additional styles

Editing Content

Text Entry
Text can be entered by clicking into the white text area or by selecting 'Edit Content' as shown below.

 

Once the desired text has been added, click OK to confirm the changes.

Copy & Paste Options
The Formatted Text Component allows for text to be pasted directly into the component as either plain or formatted text.

Plain Text
Pasting plain text into the component will remove any formatting that was copied from the original content (for example styles and images). To paste text into the control as plain text the following methods can be used:

1. Ctrl-V Shortcut - Pasting text using the Ctrl-V shortcut will be default paste in plain text.
   
   

2. Right Click Mouse - Right clicking in the component area will open the context menu as shown below.  To paste plain text using this menu simply select the Paste Plain Text option.
   
    
   
   
   

3. Editing Controls - Within the editing controls the option Paste Plain Text is available as shown below.
   
    

Formatted Text
Pasting formatted text into the component is a powerful way to bring across styles, images and HTML formatting (such as tables). To paste text into the control as formatted text the following methods can be used:

1.  Right Click Mouse - Right clicking in the component area will open the context menu as shown below.  To paste formatted text using this menu simply select the Paste option.
   
    

2. Editing Controls - Within the editing controls the option Paste Formatted Text is available as shown below.
   
    
    

Styles and Formatting
The Formatted Text Component allows for text to be styled with the existing iD Theme styles for that subsite.  Therefore, page styling is consistent with the iD Theme and any changes to the theme will be automatically reflected in the styles and formatting of the Formatted Text Component.

Selecting an option from Styles and Formatting
To apply the styles and formatting to text within the component you simply highlight the text and then select the desired style from the drop-down list as shown below (styles and formatting will differ depending on the selected iD Theme for the subsite you are editing content within).

Paragraphing
The paragraphing controls provide the following functionality:

 

  The New Paragraph icon adds a new paragraph below the current cursor position.

  The Align Left icon will align any selected to the left side of the components boundary.

  The Align Centre icon will align any selected to the centre of the component.

  The Align Right icon will align any selected to the right side of the components boundary.

  The Justify icon will justify any selected text.

  The Remove Alignment icon will remove any alignment settings applied to the selected text.

  The Ordered List icon will create an indented ordered listed (i.e. numbered 1,2,3.. etc)

  The Bulleted List icon will create an indented bulleted list using the standard bullet item.  

  The Decrease Indent icon will remove an indent from the select text if it exists.

  The Increase Indent icon will add additional indentation to the selected text.

Font
The font controls provide the following functionality:

  The Bold icon will apply the Bold style to the selected text.

  The Italic icon will apply the Italic style to the selected text.

  The Underline icon will apply the Underline style to the selected text.

  The Subscripted icon will apply the Subscript style to the text which appears smaller than the normal line of type and is set slightly below the selected text.

  The Superscripted icon will apply the Superscript style to the text which appears smaller than the normal line of type and is set slightly above the selected text.

  The Convert To Lower case icon will change any selected characters to lower case.

  The Convert To Upper case icon will change any selected characters to upper case.

  The Anchors icon will toggle the displaying of Anchor links added to the component content.  To create Anchors refer to the Achor icon found within the Rich Content section of this document.

  The Foreground Color gives the user the ability to change the color of the selected text.

  The Create Link icon will initiate the iD CMS Hyperlink control that allows the user to link to an external URL or iD Content. For more information on the Hyperlink control click here.

  The Insert a Table icon will create an HTML table that can be modified in terms of table, column, rows and cell properties.  To modify an existing table within the page right clicking on the table will load a context menu (as shown below) that allows you to modify properties accordingly.

 

Edit Table Properties - Context Menu

  


Edit Table Properties modals

 

 

 

 


  The Horizontal Rule icon will add a HTML Horizontal Rule to the page at the location of the cursor.  Once the HR has been added to the page both the width and height can be adjusted by dragging the outer boundary square icons shown when the HR is selected.

  The Image icon provides the ability to add images to the page layout.  The source of the image can either be an external URL or a file on the local filesystem.  To modify an existing Image within the page, clicking on the Image will load a context menu (as shown below) that allows you to modify properties accordingly.


Edit Image Properties - Context Menu

 

  



  The Insert Anchor icon will add a Anchor point to the page at the location of the cursor.  This Anchor can then be used at other locations (within the current page) to link directly to the anchor location.  To link to the anchor location, create a hyperlink URL for the selected text, in the pop-up select the 'URL' tab, set the 'Protocol' to 'anchor:' and in the 'URL' field add the anchor name removing any special characters or spaces, i.e. 'my anchor name' would be entered as #myanchorname.

Create an Anchor

 

Create a URL link to your anchor point

 

 

 

Editing

   The Undo icon will undo the latest changes to the components content.

  The Redo icon will reverse the last undo operation.

 

  The Strip Formatting icon will remove any formatting from the selected text.

  The Cut icon will cut the selected text from the content and place it into the system clipboard where it can be pasted to another location if desired.

  The Copy icon will place the selected text into the system clipboard where it can be pasted to another location if desired.

  The Paste icon will paste all information and Styles and Formatting from the system clipboard into the component content at the cursors current position.  For more information on Pasting see the Copy & Pasting section above.

  The Paste Plain Text icon will paste all information as plain text from the system clipboard into the component content at the cursors current position. For more information on Pasting see the Copy & Pasting section above.

  The Paste from MS Word icon will paste all information & styles and formatting from the system clipboard into the component content at the cursors current position.  Note that this option will strip out styling information supplied from MS Word if copying directly from a Word document.

  The Spell Checker icon will initiate the Spell Checker functionality.

1. General Properties
   Allows users to enable and disable general styling and formatting properties.
   
   
2. Component Properties
   Allows users to enable and disable properties that are specific to the Formatted Text component e.g. Paragraphing & Font controls.
   
   
3. Template Properties
   These properties are set within the template that the page is based on and are not usually editable from within a page. They control the overall use of a component on a page. For example, a component can be configured so that the content within it can be edited but the component itself cannot be removed from the page.
   

Name
Default Value:
The name of the component, used as the identifier for the component.




Heading
Default Value:
If text is added to the heading component a heading will be placed above the unformatted text using the iD Theme applied to the subsite (example shown below).








Padding - LEFT|RIGHT|TOP | BOTTOM
Default Value: 0px
The Padding property specifies the padding that will be placed around the component relative to the page. Specific values can be applied to the left, right, top and bottom sections of the components boundary. 

Border Width
Default Value: 2px
The border width sets the border width around the component. A width of 0 indicates that a border will not be added.




Border Style - NONE | DOTTED | DASHED | SOLID | DOUBLE | GROOVE | RIDGE | INSET | OUTSET
Default Value: none
The border style determines the style applied to the border applied around the component. A style of none indicates that a border will not be added.




Border Color 
Default Value:
The border color sets the color of the border rendered around the component.

Enable Paragraphing Controls
Default Value: True
When enabled, the Paragraphing controls (shown below and discussed in more detail in the Editing Content section) can be used while editing content.



The Paragraphing controls:                        


Enable Styles & Formatting
Default Value: True
When enabled, the Styles and Formatting drop-down menu (shown below and discussed in more detail in the Editing Content section) can be used while editing content.



The Styles & Formatting drop-down menu:                


Enable Font Controls
Default Value: True
When enabled, the Font controls (shown below and discussed in more detail in the Editing Content section) can be used while editing content.



The Font controls:                                                         


Enable Rich Content Controls
Default Value: True
When enabled, the Rich Content controls (shown below and discussed in more detail in the Editing Content section) can be used while editing content.

The Rich Content:                                                                         


Enable Editing Controls
Default Value: True
When enabled, the Editing controls (shown below and discussed in more detail in the Editing Content section) can be used while editing content.



The Editing controls:                                     

Allow Property Editing

Default Value: True

This property determines if the properties of the component can be modified from the default settings provided via the template.




Allow Inline Editing

Default Value: True

This property determines if the component's content can be modified from the default content provided via the template.

Allow Sharing

Default Value: True

This property determines if the component can be shared for other users to use within iD CMS pages.

Allow Repositioning
Default Value: True

If property determines if the component can be moved around within the page layout structure (drag and drop). 

Allow Removal

Default Value: True

If property determines if the component can be removed from the page.