Integrate <ruby> tag in richtext component | Community
Skip to main content
N
NagalaxmiTh
Level 2
January 15, 2025
Solved

Integrate <ruby> tag in richtext component

  • January 15, 2025
  • 3 replies
  • 1235 views

Hi,

what is the procedure to integrate the <ruby> tag in the richtext component. Is there any custom implementation.

 

Best answer by arunpatidar

Hi @nagalaxmith 

You can create a custom plugin e.g.

https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html 

3 replies

Kamal_Kishor
Community Advisor
Kamal_KishorCommunity Advisor
Community Advisor
January 15, 2025

@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.

 

Output:

thanks.

    N
    NagalaxmiThAuthor
    Level 2
    January 16, 2025

    @kamal_kishor  as I mentioned in the post we need a custom implementation. Our business doesnt want to use sourcedit plugin from the rictext.

    Any recommendataions?

      arunpatidar
      Community Advisor
      arunpatidarCommunity AdvisorAccepted solution
      Community Advisor
      January 16, 2025

      Hi @nagalaxmith 

      You can create a custom plugin e.g.

      https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html 

      Arun Patidar
        AmitVishwakarma
        Community Advisor
        AmitVishwakarmaCommunity Advisor
        Community Advisor
        January 19, 2025

        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.

          N
          NagalaxmiThAuthor
          Level 2
          January 21, 2025

          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

            arunpatidar
            Community Advisor
            arunpatidarCommunity Advisor
            Community Advisor
            January 22, 2025

            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

            Arun Patidar
              kautuk_sahni
              Community Manager
              kautuk_sahniCommunity Manager
              Community Manager
              January 27, 2025

              @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!

              Kautuk Sahni
              Terms & ConditionsAccessibility statement

              Loading footer...