Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Customizing RTE Plugin

Avatar

Level 2

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 2

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.