Rich Text Component

Component Information

Component Title Rich Text Component
Description The RTE provides content authors with a wide range of functionality for editing their text content.
Features
  • In-place editing
  • Rich text editor
  • Styles
  • Styles
Location /apps/ehi-core/aem65/components/content/richtext/v1/rich-text-
sling:resourceSuperType core/wcm/components/text/v2/text
Supported AEM Versions 6.5
Editing Mode inPlaceEdit
Component Group Cheerios Experience
Use Object The Rich Text Component component uses the com.adobe.cq.wcm.core.components.models.Text Sling model as its Use-object.

 

Client Libraries

The component provides a core.wcm.components.text.v2.editor editor client library category that includes JavaScript handling for dialog interaction. It is already included by its edit and design dialogs.

BEM Description

BLOCK cmp-text
          ELEMENT cmp-text__paragraph

Extending the Components

Extending the components can be done in multiple ways depending on the needs of the brand component.

 

Use this approach if you do not have any required html markup changes or backend java changes. This will only update the title of the component, componentGroup and point to the resourceSuperType. Optionally can extend the description.

  1. Change .content.xml file properties 
  2. sling:resourceSuperType to point to the Cheer.IOs component [required]
  3. jcr:title - new Component title
  4. componentGroup - Brand specific Group [required]
  5. jcr:description - Helpful description

 

 

Use this approach if you need to update css classes or add data attributes and do not need to change the backend model, or potentially want to use a different model by retain all of the markup in the component-tmpl.html (Component Template) markup.

  1. Follow steps in Extend the Component - Basic
  2. Extend the file i.e. extend-example-option2.html
  3. Update file with new properties
  4. Update the html file with desired changes

 

 

The component template is usually named component-tmpl.html this file contains the html markup. Update this file if you need to change the html structure of the component.

  1. Follow Steps in Extend Component Basic
  2. Extend the file component.html to point to the new component-tmpl.html file
  3. Extend the file i.e. component-tmpl.html
  4. Update file with new markup

 

 

Use this approach if you need to change the Sling Model to update the backend logic.

Files that will need to be added when extending:

  1. Follow Steps in Extend Component - Basic
  2. Java Interface - this will implement the model with the new methods (if needed)
  3. Sling Model - this will implement the Java Interface from step 1 and leverage the sling delegation pattern to override the original methods
  4. The component.html file to match the new component name

It is possible to extend more than just the component.html file, if necessary any file that is resourceSupertyped can be extend for example if something needs added to the dialog.

This gives us the flexibility to change our classes or add attributes easily.  Say I want to add new javascript I can easily target a different data attribute to trigger my javascript.

Configuration Properties

Configure the Rich Text Editor plug-ins

RTE functionalities are made available via a series of plug-ins, each with features property. You can configure the features property to enable or disable, one or more RTE features. 

Configure the following properties that apply in Dialog editing mode in Touch UI only:

  • useFixedInlineToolbar : Set this Boolean property defined on the RTE node (one with sling:resourceType= cq/gui/components/authoring/dialog/richtext ) to True , to make RTE toolbar fixed instead of floating.
  • When this property is true, Richtext editing is, by default, started on the "foundation-contentloaded" event.
  • To prevent this, set the property customStart to True and trigger the 'rte-start' event to start RTE editing. When this property is 'true', the default behavior, rte start on click, does not work.
  • customStart : Set this Boolean property defined on the RTE node to True , to control when to start RTE by triggering the event rte-start .
  • rte-start : Trigger this event on the contenteditable-div of RTE, when to start editing RTE. This works only if customStart has been set to true.When RTE is used in the touch-enabled dialog, setting the property useFixedInlineToolbar to true is mandatory to avoid issues.

RTE user interface settings and content policies

Administrators can control the RTE options using content policies, say instead of doing the configuration as described above. Content policies define the design properties of a component when used as part of an editable template . For example, if a text component that uses the RTE is used with an editable template, the content policy can define that the bold option be available and a few paragraph formatting options be available. Content policies are reusable and can be applied across multiple templates.

The available options in the RTE flow downstream from the user interface configurations to the content policies.

  • User interface configuration settings define which options are available to the content policies.
  • If the user interface configuration of the RTE removed or doesn't enable an item, the content policy cannot configure it.
  • An author has access to only such functionality as is made available by the user interface configurations and the content policies.

NOTE:

The Core Components text component allows template editors to configure many RTE plugins in a GUI as content policies, eliminating the need for technical configuration. Content policies can work with RTE UI configurations as described in this document.

For more information, see the RTE UI settings and content polices section of this document as well as Creating Page Templates and the Core Components developer documentation .

For reference purposes, the default Text components (delivered as part of a standard installation) can be found at:

  • /libs/wcm/foundation/components/text

  • /libs/foundation/components/text

To create your own text component, copy the above component instead of editing these components.

Policy Dialog Visual

Edit Dialog Properties

The following properties are written to JCR for this Title component and are expected to be available as Resource properties:

  • Bold
  • Italic
  • Underline
  • Superscript
  • Subscript
  • Past as Text
  • Paste from word
  • Hyperlink
  • Unlink
  • Find
  • Replace
  • Align Left, Center, Right
  • Bullet
  • Number
  • Outdent/Indent
  • Table
  • Spell Check
  • Special Characters
  • Source Edit
  • Paragraph format

Edit Dialog Visual

Component Demo

Rich Text provides a variety of styles and formatting.

Heading

Right

Center

  • Bullets©
  • bullet
  1. Number
  2. Number
  3.  
    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        E524Z2
    
    3. 

  3. 
        jcr:lastModifiedBy:
        E524Z2
    
    4. 

  4. 
        jcr:created:
        
    
    5. 

  5. 
        text:
        <p>Rich Text provides a variety of styles and formatting.</p>
<h1>Heading</h1>
<p style="text-align: right;">Right</p>
<p style="text-align: center;">Center</p>
<ul>
<li>Bullets©</li>
<li>bullet</li>
</ul>
<ol>
<li>Number</li>
<li>Number</li>
<li>&nbsp;</li>
</ol>

    
    6. 

  6. 
        jcr:lastModified:
        
    
    7. 

  7. 
        sling:resourceType:
        ehi-core/aem65/components/content/richtext/v1/richtext
    
    8. 

  8. 
        textIsRich:
        true
    
    9. 




    
        

    

    
    
    

        
Rich Text provides a variety of styles and formatting.


Heading


Right


Center


    

  • Bullets©
    • 

  • bullet
    • 



    

  1. Number
    2. 

  2. Number
    3. 

  3.  
    4. 



        
    


    
    


    

    


    JSON


    JSON


    JSON


    JSON


    JSON


    JSON


    JSON


    JSON

Built with Core Components 2.7.0.