Adobe Experience Manager Sites & More

TushaarSrivastava · 2/7/22

Hi Team,
I would like to create a richText inside Multifield and need to create a custom rte plugin where i can set up two dropdown fields to the plugin for rich text.

indise Primary Attribute dropdown we have some values like : PrimaryAttribute1, PrimaryAttribute2 , PrimaryAttribute3, PrimaryAttribute4

and Secondary Attribute dropdown we have some values like: SecondaryAttribute1, SecondaryAttribute2 and SecondaryAttribute3.

The scenaro here is:

In the dialog we need to add richtext. This richtext should have all the RTE plugins. Along with this we need to create a new RTE plugin.
This RTE plugin will contain 2 tagfields using which author could select a primary attribute and a secondary attribute. Once the primary and secondary attributes are chosen, these attributes will be included in the text like “##<primary-attibute>,<secondary-attribute>@@”.

Example value of text: “This is the product title ##primaryattribute:product-attributes,secondaryayytibute:product-attributes@@“.
Author can choose primary and secondary attributes multiple times in this rich text.
Default html tag that should surround richtext val should be “div“. In the para format RTE Plugin the first item should be div.

@arunpatidar @Vijayalakshmi_S @Theo_Pendle @kautuk_sahni @BrianKasingli

BrianKasingli · 2/7/22

It looks like these are standard tags that you would like to flag text in your RTE (cq/gui/components/authoring/dialog/richtext). Unless if you have a more custom usecase.

There are two plugins RTE that you can try to use:
1. paraformat

2. styles

1. Paraformat example:

<paraformat
    jcr:primaryType="nt:unstructured"
    features="*">
    <formats jcr:primaryType="nt:unstructured">
        <default_p
            jcr:primaryType="nt:unstructured"
            description="Paragraph"
            tag="p"/>
        <default_h1
            jcr:primaryType="nt:unstructured"
            description="Heading 1"
            tag="h1"/>
        <default_h2
            jcr:primaryType="nt:unstructured"
            description="Heading 2"
            tag="h2"/>
        <default_h3
            jcr:primaryType="nt:unstructured"
            description="Heading 3"
            tag="h3"/>
        <default_h4
            jcr:primaryType="nt:unstructured"
            description="Heading 4"
            tag="h4"/>
        <default_h5
            jcr:primaryType="nt:unstructured"
            description="Heading 5"
            tag="h5"/>
        <default_h6
            jcr:primaryType="nt:unstructured"
            description="Heading 6"
            tag="h6"/>
    </formats>
</paraformat>

2. Styles

<styles
    jcr:primaryType="nt:unstructured"
    features="*">
    <styles jcr:primaryType="nt:unstructured">
        <product1
            jcr:primaryType="nt:unstructured"
            cssName="product-1"
            text="Product 1"/>
        <product2
            jcr:primaryType="nt:unstructured"
            cssName="product-2"
            text="Product 2"/>
        <product3
            jcr:primaryType="nt:unstructured"
            cssName="product-3"
            text="Product 3"/>
</styles>

Example Usage:

<?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">
    <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">
                                            <text
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                                    name="./text"
                                                    useFixedInlineToolbar="{Boolean}true">
                                                <rtePlugins jcr:primaryType="nt:unstructured">
                                                    <format
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*"/>
                                                    <justify
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*"/>
                                                    <lists
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*"/>
                                                    <paraformat
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*">
                                                        <formats jcr:primaryType="nt:unstructured">
                                                            <default_p
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Paragraph"
                                                                    tag="p"/>
                                                            <default_h1
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Heading 1"
                                                                    tag="h1"/>
                                                            <default_h2
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Heading 2"
                                                                    tag="h2"/>
                                                            <default_h3
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Heading 3"
                                                                    tag="h3"/>
                                                            <default_h4
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Heading 4"
                                                                    tag="h4"/>
                                                            <default_h5
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Heading 5"
                                                                    tag="h5"/>
                                                            <default_h6
                                                                    jcr:primaryType="nt:unstructured"
                                                                    description="Heading 6"
                                                                    tag="h6"/>
                                                        </formats>
                                                    </paraformat>
                                                    <links
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*"/>
                                                    <image
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*"/>
                                                    <findreplace
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*"/>
                                                    <subsuperscript
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*"/>
                                                    <spellcheck
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*"/>
                                                    <misctools
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*">
                                                        <specialCharsConfig jcr:primaryType="nt:unstructured">
                                                            <chars jcr:primaryType="nt:unstructured">
                                                                <copyright
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;#169;"/>
                                                                <trademark
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;#8482;"/>
                                                                <registered
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;#174;"/>
                                                                <emDash
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;#8212;"/>
                                                                <pound
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;#163;"/>
                                                                <nbsp
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;#160;"/>
                                                            </chars>
                                                        </specialCharsConfig>
                                                    </misctools>
                                                    <styles
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*">
                                                    <styles jcr:primaryType="nt:unstructured">
                                                        <product1
                                                                jcr:primaryType="nt:unstructured"
                                                                cssName="product-1"
                                                                text="Product 1"/>
                                                        <product2
                                                                jcr:primaryType="nt:unstructured"
                                                                cssName="product-2"
                                                                text="Product 2"/>
                                                        <product3
                                                                jcr:primaryType="nt:unstructured"
                                                                cssName="product-3"
                                                                text="Product 3"/>
                                                    </styles>
                                                    <table
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*"/>
                                                </rtePlugins>
                                                <uiSettings jcr:primaryType="nt:unstructured">
                                                    <cui jcr:primaryType="nt:unstructured">
                                                        <inline
                                                                jcr:primaryType="nt:unstructured"
                                                                toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat,table#table]">
                                                            <popovers jcr:primaryType="nt:unstructured">
                                                                <justify
                                                                        jcr:primaryType="nt:unstructured"
                                                                        items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                                                                        ref="justify"/>
                                                                <lists
                                                                        jcr:primaryType="nt:unstructured"
                                                                        items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                                                                        ref="lists"/>
                                                                <paraformat
                                                                        jcr:primaryType="nt:unstructured"
                                                                        items="paraformat:getFormats:paraformat-pulldown"
                                                                        ref="paraformat"/>
                                                                <styles
                                                                        jcr:primaryType="nt:unstructured"
                                                                        items="styles:getStyles:styles-pulldown"
                                                                        ref="styles"/>
                                                            </popovers>
                                                        </inline>
                                                        <dialogFullScreen
                                                                jcr:primaryType="nt:unstructured"
                                                                toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat,table#table]">
                                                            <popovers jcr:primaryType="nt:unstructured">
                                                                <paraformat
                                                                        jcr:primaryType="nt:unstructured"
                                                                        items="paraformat:getFormats:paraformat-pulldown"
                                                                        ref="paraformat"/>
                                                            </popovers>
                                                        </dialogFullScreen>
                                                        <tableEditOptions
                                                                jcr:primaryType="nt:unstructured"
                                                                toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]"/>
                                                    </cui>
                                                </uiSettings>
                                            </text>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

TushaarSrivastava · 2/7/22

Hi @BrianKasingli
Thanks for response, It is a custom plugin. I have updated the usecase in the above question.

I have used paraformat for the heading, but here we have to create a custom plugin which can be used multiple times in a richtext.
Could you please check the updated usecase.

Vijayalakshmi_S · 2/8/22

@TushaarSrivastava

Could you please let know

If the attributes are to be populated to any text selection or is it expected on the enclosing div of RTE content
the expected HTML markup upon choosing the attributes.

TushaarSrivastava · 2/8/22

Hi @Vijayalakshmi_S

If the attributes are to be populated to any text selection or is it expected on the enclosing div of RTE content :: scenario here is let say if we select primary attribute or secondary attribute dropdown value the we can see those value on enclosing div of RTE e.g. This is the product title ##project:product-Primaryattributes/ProductData/Title,project:product-Secondaryattributes/productData/Desc@@
- here from primary attribute dropdown we have selected value : project:product-Primaryattributes/ProductData/Title
- and from secondary attribute dropdown we have selected value : project:product-Secondaryattributes/productData/Desc
So here for choosing the markup is like we are providing further values to text string that we are entering over richtext

Adobe Experience Manager Sites & More

Custom rte plugin like dropdown. [AEM as cloud]

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe