How can we add a font size plugin in Rich Text Editor in AEM as Cloud?

[Shwetha1994]

Any plugins available to add or need to follow any steps.

[Karishma_begumSh]

Hi @Shwetha1994 

Step 1: Create a Custom RTE Plugin Configuration

1. Create a Custom Plugin:
   AEM's CKEditor allows you to customize the toolbar by adding plugins. To include a font size plugin, you will need to define the plugin in a custom configuration file.

2. Modify the RTE Configuration:
   In your AEM project, locate the cq:dialog for your component, where the RTE is defined. If you're using the default RTE, you'll need to configure it in the dialog’s JSON or JavaScript file.

3. Add the Font Size Plugin to the Configuration:
   You need to add the plugin and configure the toolbar. Here’s an example of how to include the font size plugin in the configuration.

{
  "plugins": [
    "font",
    "fontSize"
  ],
  "toolbar": [
    ["FontSize"]
  ]
}

This will add a font size selector to the toolbar. Make sure the font and fontSize plugins are included in the plugins array.

Step 2: Configure the RTE in the Dialog

If you're using a dialog to manage the component, ensure that the dialog is properly configured to include the custom RTE settings. You will need to use the RTE configuration in the cq:dialog structure.

Here is an example configuration in an AEM dialog that includes the fontSize plugin:

<dialog xmlns="http://www.w3.org/2001/XMLSchema-instance" 
        xmlns:sling="http://sling.apache.org/jcr/sling" 
        jcr:primaryType="cq:Dialog">
    <content
        jcr:primaryType="cq:Widget"
        fieldLabel="Rich Text Editor"
        xtype="richtexteditor"
        rtePlugins="[font, fontSize]"
        toolbar="fontSize"
    />
</dialog>

Step 3: Deploy the Plugin

• Ensure the plugin is properly bundled in your AEM deployment package.

• Once deployed, clear the browser cache and test the RTE with the font size plugin.

Step 4: Test the Changes

1. Go to the page where the component with RTE is implemented.

2. Open the dialog and check if the font size selector appears in the toolbar.

3. Test the functionality by changing the font size of the text in the editor.

Hope this helpful.

Regards,

Karishma.

[Syed_Shaik]

To add a font size plugin to the Rich Text Editor (RTE) in Adobe Experience Manager (AEM) as a Cloud Service, you need to customize the Rich Text Editor (RTE) configuration using the Text component’s dialog and cq:inplaceEditing configuration.

Step-by-Step to Add Font Size Plugin in AEM RTE:

---

 Create or Update RTE Plugin Configuration

Ensure your text component uses the correct rtePlugins configuration.

Path: /apps/<your-project>/components/<your-text-component>/cq:dialog/content/items/<path_to_rte>/rtePlugins

If not present, create it.

Example Configuration Snippet:

xml

CopyEdit

<rtePlugins jcr:primaryType="nt:unstructured"> <format jcr:primaryType="nt:unstructured" features="[bold,italic,underline]"/> <styles jcr:primaryType="nt:unstructured" features="[*]"/> <subsuperscript jcr:primaryType="nt:unstructured" features="sub,sup"/> <fontsize jcr:primaryType="nt:unstructured" features="*"/> </rtePlugins>

fontsize plugin isn't enabled by default. You need to configure it manually as above.

---

Add UI Settings for Font Sizes

You also need to configure the uiSettings node to expose it in the toolbar.

<uiSettings jcr:primaryType="nt:unstructured"> <toolbar jcr:primaryType="nt:unstructured"> <fullscreen jcr:primaryType="nt:unstructured" items="[undo, redo, bold, italic, underline, fontsize]" /> </toolbar> </uiSettings>

You can customize toolbar items based on your requirements.

---

Provide Font Size Styles via styleFormats (optional)

You can define the actual font size classes:

xml

CopyEdit

<styles jcr:primaryType="nt:unstructured"> <style1 jcr:primaryType="nt:unstructured" cssName="small-text" text="Small Text"/> <style2 jcr:primaryType="nt:unstructured" cssName="medium-text" text="Medium Text"/> <style3 jcr:primaryType="nt:unstructured" cssName="large-text" text="Large Text"/> </styles>

These classes (small-text, etc.) must be defined in your clientlibs CSS.

---

Clientlib Support (Optional but Recommended)

Ensure the font size classes used above are defined in the CSS, e.g.:

.small-text { font-size: 12px; } .medium-text { font-size: 16px; } .large-text { font-size: 24px; }

This CSS should be part of the clientlib that's included with your component.

[arunpatidar · Accepted solution]

Hi @Shwetha1994 

Please check here 

https://medium.com/@lathamanivannan/building-the-perfect-rte-in-aem-step-by-step-with-plugin-exclusi... 

[kautuk_sahni]

@Shwetha1994 Just checking in — were you able to resolve your issue?
We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!