@nagalaxmith Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

Translate

Kautuk Sahni

AmitVishwakarma

Level 1

To integrate the <ruby> tag in the Rich Text Component in AEM, you would need to follow these steps:

1. Extend the Rich Text Component:

The default Rich Text Editor (RTE) in AEM does not natively support the <ruby> tag. You can extend the RTE by adding custom configurations.

2. Create a Custom RTE Plugin:

Create a Custom Plugin: Develop a custom plugin for the AEM Rich Text Editor that enables the use of the <ruby> tag.
You can refer to the official AEM documentation on how to create RTE plugins.

3. Configure the Allowed Tags:

Edit the RTE configuration to allow the <ruby> tag.
In AEM, navigate to /apps/<your-app>/config and modify the RTE configuration to include <ruby>.
For example, update the richtext config file to allow the <ruby> tag.

4. Handle Output (if necessary):

If you are using the Rich Text Component with HTL, ensure the output is processed safely, ensuring that the <ruby> tag and associated elements (like <rt>) are rendered correctly.

5. Test:

Once the plugin is created and configuration changes are made, test the Rich Text Editor to ensure that the <ruby> tag is being recognized and rendered properly in the content.

Summary:

Integrating the <ruby> tag in AEM's Rich Text Component requires creating a custom RTE plugin and adjusting the RTE configuration to allow the tag. You may also need to handle output formatting to ensure proper rendering.

Translate

N

NagalaxmiThAuthor

Level 2

The link give above is not valid. I have gone through multiple blogs but didnt get the result.

@arunpatidar could you pls guide

1. I have added the node under the rte for the ruby, but how to add the image for the button and onclick of it how to enable to the tag

2. How to add the clientlibs to that particular node to add the ruby styling. Though I have created the client lib and added in the component.html its not working

3. How to call the ruby.js to add the styling

Translate

arunpatidar

New Participant

Hi @nagalaxmith

You can add icon at

tbGenerator.registerIcon(groupFeature, "textColor");

the Icon list is here https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/Coral.Icon.html

There are many ways to load clientlibs in the page. You can include clienlibs as dependency or embed into the site clientlibs. To load clienlibs in the dialog use externalClinelibs.
you can load ruby.js(clieblibs) from the plugin as well, if you add as dependency

Translate

Arun Patidar

Kamal_Kishor

New Participant

@nagalaxmith : Are you not able to use source edit? Go to fullscreen in rich-text editor mode and click on source edit, you should be able to create valid html tags here.