RTE style plugin with dynamic dropdown values

[Kamal_Kishor]

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

[Raja_Reddy]

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]

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

Hi @Kamal_Kishor 
Are you looking for this
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/dynamic-dropdown/m-p/68533...?

[Kamal_Kishor]

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

[arunpatidar · Accepted solution]

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

[Kamal_Kishor]

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

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