How to add Richtext plugins like Color picker, Anchor, Special characters, Styles, Paragraph format in Richtext field of content fragment.

[ssin93]

We are able to add only

• Super script
• Sub script
  Source edit plugins  in richtext of content fragment.

[EstebanBustamante · Accepted solution]

Hi, 

Can you check this: https://lhotsetechnologies.com/blog/enable-rte-plugins-for-content-fragment/ ?

[HrishikeshKa]

Hi @ssin93 ,

To add additional plugins like Color Picker, Anchor, Special Characters, Styles, and Paragraph Format to the RichText field of a Content Fragment in AEM, you need to customize the RichText Editor configuration in AEM. Here’s a step-by-step guide to achieve this:

Steps to Add Plugins to the RichText Field in Content Fragments

1. Access the RichText Editor Configuration:

   • Go to CRXDE Lite: http://<AEM-HOST>:<PORT>/crx/de/index.jsp.

2. Navigate to the Correct Configuration Node:

   • Navigate to /libs/settings/wcm/policies/editors/contentfragment.
   • If the path doesn’t exist, you can create it or use the path /apps/settings/wcm/policies/editors/contentfragment for your custom configurations to avoid overwriting the default ones.

3. Create/Modify the Configuration Node:

   • Under the contentfragment node, create a node named rte.
   • Create a config node under rte.
   • Under config, create a node named full.

4. Add the Desired Plugins:

   • Add the following properties to the full node

{
  "features": [
    "bold",
    "italic",
    "underline",
    "strikethrough",
    "subscript",
    "superscript",
    "editSource",
    "justifyLeft",
    "justifyCenter",
    "justifyRight",
    "justifyBlock",
    "oList",
    "uList",
    "indent",
    "outdent",
    "link",
    "unlink",
    "anchor",
    "image",
    "removeFormat",
    "undo",
    "redo",
    "specialCharacters",
    "styles",
    "paragraphFormat",
    "color"
  ]
}
​

1. • Make sure each feature you want to enable is listed here. You can add or remove features as needed.

2. Example Node Structure: The node structure in CRXDE Lite should look something like this:

/apps
  /settings
    /wcm
      /policies
        /editors
          /contentfragment
            /rte
              /config
                /full
                  - features [String Array]

1. Where features is a property with the array of features listed above.

2. Save and Test:

   • Save your changes in CRXDE Lite.
   • Go to your AEM Author instance and open a Content Fragment to check if the RichText editor now includes the additional plugins.

Notes

• Custom Styles: If you want to add custom styles, you might need to configure a custom style node:

  • Create a node under /apps/settings/wcm/policies/editors/contentfragment/rte/config named styles.
  • Add properties for each style you want to define.

• Color Picker Configuration:

  • If you need to configure specific colors for the color picker, you can do so under the uiSettings node in the same configuration path.

Example Configuration for Custom Styles

{
  "styles": [
    {
      "name": "Custom Style 1",
      "cssName": "custom-style-1"
    },
    {
      "name": "Custom Style 2",
      "cssName": "custom-style-2"
    }
  ]
}

Additional Configuration

If additional configuration is needed for specific plugins (like special characters or color picker), you might need to refer to the plugin documentation and add necessary configurations under appropriate nodes.

By following these steps, you should be able to customize the RichText field in Content Fragments to include plugins like Color Picker, Anchor, Special Characters, Styles, and Paragraph Format, making the RichText Editor more powerful and flexible for content authors.

[kautuk_sahni]

@ssin93 Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.