RTE style plugin with dynamic dropdown values | Community
Skip to main content
Kamal_Kishor
Community Advisor
Kamal_KishorCommunity Advisor
Community Advisor
July 5, 2024
Solved

RTE style plugin with dynamic dropdown values

  • July 5, 2024
  • 4 replies
  • 1358 views

[Update]: Is it possible to have the values under /apps/...../text/..../rteplugins/styles/styles to come dynamically instead of static values?

We have a requirement to have RTE styles plugin with dynamic drop-down values. We have the list of values but somehow unable to bind those values in styles plugin. RTE continues to work fine with predefined values under 'styles' node.

Is there a way to do this without making any complex changes in ootb code?

 

We need to do something similar to what we can already do with Style System but in RTE plugin (project ask). 

@aanchal-sikka , @arunpatidar , @raja_reddy 

thanks.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by arunpatidar

Hi @kamal_kishor 
If you don’t want to extend OOTB code, then you can create custom style plugin which allow you to generate & control style options.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/second-styles-plugin-for-rte-touch-ui-aem-6-3/m-p/299425 

4 replies

Raja_Reddy
Community Advisor
Raja_ReddyCommunity Advisor
Community Advisor
July 5, 2024

Hi @kamal_kishor  try below steps

Add custom styles to the RTE plugin without making complex changes to the OOTB code.

1. Create a new node under /apps to store your custom styles. For example, /apps/myproject/rteStyles
2. Under the `rteStyles` node, create a new node for each style you want to add.apps/myproject/rteStyles/myStyle
3. Add the necessary properties to the myStyle node to define the style. The properties you can use depend on the type of style you want to create.
textColor: the color value in hex format (e.g. #ff0000 for red)
4. In your RTE configuration, add a new styles` node under uiSettings.
<uiSettings jcr:primaryType="nt:unstructured">
<styles jcr:primaryType="nt:unstructured" />
</uiSettings>
5. Under the styles node, add a new node for each custom style you want to add /apps/myproject/rteStyles/myStyle
6. In the myStyle node, add the necessary properties to reference the custom style you created earlier.
- cssName: the name of the CSS class to apply to the style (e.g. my-style)
- textColor: the name of the property that defines the text color (e.g. textColor)
- textColorDefaultValue: the default value for the text color (e.g. #ff0000)

7. In your RTE configuration, add the necessary styles property to the features node to enable the custom styles.
<features jcr:primaryType="nt:unstructured">
<styles jcr:primaryType="nt:unstructured">
<myStyle jcr:primaryType="nt:unstructured" />
</styles>
</features>
8. In your RTE configuration, add the necessary styles property to the model node to enable the custom styles.
<model jcr:primaryType="nt:unstructured">
<styles jcr:primaryType="nt:unstructured">
<myStyle jcr:primaryType="nt:unstructured" />
</styles>
</model>

9. In your RTE configuration, add the necessary styles property to the plugins node to enable the custom styles.
<plugins jcr:primaryType="nt:unstructured">
<styles jcr:primaryType="nt:unstructured">
<myStyle jcr:primaryType="nt:unstructured" />
</styles>
</plugins>
You can repeat steps 2-6 for each custom style you want to add.

    Kamal_Kishor
    Community Advisor
    Kamal_KishorCommunity AdvisorAuthor
    Community Advisor
    July 8, 2024

    @raja_reddy : thank you for looking at this. We are able to add static values into the style plugin.

    The values in step 2-6 are meant to be dynamic for our use-case, which is our main concern at this point.

      pulkitvashisth
      Community Advisor
      pulkitvashisthCommunity Advisor
      Community Advisor
      July 6, 2024

      Hi @kamal_kishor 
      Are you looking for this
      https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/dynamic-dropdown/m-p/685338#M170987?

        Kamal_Kishor
        Community Advisor
        Kamal_KishorCommunity AdvisorAuthor
        Community Advisor
        July 8, 2024

        No, this is needed inside RTE component.
        thank you.

          arunpatidar
          Community Advisor
          arunpatidarCommunity AdvisorAccepted solution
          Community Advisor
          July 8, 2024

          Hi @kamal_kishor 
          If you don’t want to extend OOTB code, then you can create custom style plugin which allow you to generate & control style options.

          https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/second-styles-plugin-for-rte-touch-ui-aem-6-3/m-p/299425 

          Arun Patidar
            Kamal_Kishor
            Community Advisor
            Kamal_KishorCommunity AdvisorAuthor
            Community Advisor
            July 9, 2024

            @arunpatidar : thank you for replying.

            Not exactly what I was looking for initially but I understand we will have to use an alternative.

            thanks.

              kautuk_sahni
              Community Manager
              kautuk_sahniCommunity Manager
              Community Manager
              July 8, 2024

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