Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Customizing RTE Plugin

Avatar

Level 3

I'm trying to add a custom dropdowns under paraformat which will basically change the text size when its selected just like the heading tags. The format I need to hit is <div class="large-font">. 

I tried to create the styles node referred in styles plugin for RTE

 

<styles
        jcr:primaryType="nt:unstructured"
        features="*">
        <styles jcr:primaryType="cq:WidgetCollection">
            <large
                jcr:primaryType="nt:unstructured"
                cssName="large-font" text="large-font"/>
			<medium jcr:primaryType="nt:unstructured" 
				cssName="medium-font" 
				text="medium-font"/>
			<small jcr:primaryType="nt:unstructured" 
			cssName="small-font" 
			text="small-font"/> 
		</styles> 
</styles>

 

but a blank space shows up in the dropdown at the end. is there anything I am missing. Thanks for any help

3 Replies

Avatar

Community Advisor

Hi,

 

We added custom styles tab in RTE like below and it is working as expected

 

<styles jcr:primaryType="nt:unstructured" features="*">

    <styles jcr:primaryType="nt:unstructured">

           <size1 jcr:primaryType="nt:unstructured" cssName="txt--1"  text="Size 1"/>

           <size2 jcr:primaryType="nt:unstructured" cssName="txt--2" text="Size 2"/>

    </styles>

</styles>

Try to change from cq:WidgetCollection to nt:unstructured

Avatar

Level 3

I changed cq:WidgetCollection to nt:unstructured  but it still shows a blank space only 

hrempd_0-1648622689850.png

 

Avatar

Employee Advisor

We could follow @Ravi_Pampana suggestion in terms of implementation to have dropdown with options in Touch UI. 

Please note that we normally use jcr:parimaryType=cq:WidgetCollection with classic ui dialog editor only.