Customizing RTE Plugin

[hr-empd]

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

[Ravi_Pampana]

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

[hr-empd]

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

[DEBAL_DAS]

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.