RTE CSS adding on Paraformats

[Ronnie09]

In RTE I have one scenario where in Paraformat

I want to add class name="para" when the Paragraph is selected, <p class="para">TEXT</p>

when Quote is selected <quote class="quotations">

How can we do that in RTE?

[AsifChowdhury · Accepted solution]

Hello @Ronnie09 

You can extend the core text component then you can set properties in your custom component's dialog xml to your requirements like this

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Text"
    sling:resourceType="cq/gui/components/authoring/dialog"
    helpPath="https://www.adobe.com/go/aem_cmp_text_v2">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        granite:class="cq-RichText-FixedColumn-column"
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <graniteCustom
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="/granite/ui/components/coral/foundation/includeclientlibs"
                                            categories="[ous.commons.rte.text.findreplace]"/>
                                            <text
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                                name="./text"
                                                useFixedInlineToolbar="{Boolean}true">
                                                <rtePlugins jcr:primaryType="nt:unstructured">
                                                    <paraformat
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*">
                                                        <formats jcr:primaryType="cq:WidgetCollection">
                                                            <default_p
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Paragraph"
                                                                    class="para"/>
                                                            <default_blockquote
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Quote"
                                                                    class="quotations"/>
                                                        </formats>
                                                    </paraformat>
                                                </rtePlugins>
                                            </text>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>