Reuse customized RTE component in touch ui dialog

[sreekalyanip]

I would like to reuse a customized rte component in touch ui dialog i.e., in another component i would like to reuse customized RTE component as an touch ui dialog property.

The below component

would like to reuse in touch ui dialog

How can i achieve the above one

Thanks & Regards,
Kalyani

[arunpatidar · Accepted solution]

Hi,

I think you can do it with inheritance(sling:resourceSuperType)

Please check Configure rte plugins at global level

Thanks

Arun

[smacdonald2008]

Only way is as Arun suggested. Personally - I prefer a 1-1 approach. That is, each dialog that needs a RTE has its own. There is very little effort dropping in a node into a dialog JCR branch that represents a RTE.  It seems to work better.

[sreekalyanip]

Hi Arun,

I have tried the following link and i am able to get the rich text editor as required. But the problem i am facing is that on the window when the dialog opens we have two fullscreen modes.

So when i click only one i.e. text editor one and close the same one then able to get the only one toolbar of plugins. But if for opening i click the full screen on the text editor and close and open & close on the component level then i am getting two tool bars

And when i click on the text editor the below one disappearing and also text editor doesnot work. Moreover Each time i click on the component level full screen i am getting another tool bar added. So how to stop it. Without fullscreen in the rteplugin the plugins are not being shown. Can you please help me out with it. Is there a way we can remove the toggle button at component dialog.

[arunpatidar]

Hi,

Can you share your dialog xml? I tried same with coral2 and Coral3, working for me. However after switching to fullscreen and then to small screen , I can see extra space but doing same again then space will be gone.

But I can't see toggle plugin in plugin toolbar.

[sreekalyanip]

Hi Arun,

Please find below the touch ui dialog and the dialog.xml file which i am referencing.

Touch Ui dialog:

-------------------

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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="Legal Footer"

    sling:resourceType="cq/gui/components/authoring/dialog">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/foundation/container">

        <layout

            jcr:primaryType="nt:unstructured"

            sling:resourceType="granite/ui/components/foundation/layouts/tabs"

            type="nav"/>

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

            <tabs

                jcr:primaryType="nt:unstructured"

                sling:resourceType="granite/ui/components/foundation/container"

                rel="cq-siteadmin-admin-properties-tabs">

                <layout

                    jcr:primaryType="nt:unstructured"

                    sling:resourceType="granite/ui/components/foundation/layouts/tabs"

                    type="nav"/>

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

                    <backgroundColor

                        jcr:primaryType="nt:unstructured"

                        jcr:title="Background Color"

                        sling:resourceType="granite/ui/components/foundation/section">

                        <layout

                            jcr:primaryType="nt:unstructured"

                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

                            margin="{Boolean}false"/>

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

                            <column

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/container">

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

                                    <lightBackground

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="/libs/granite/ui/components/foundation/form/radio"

                                        text="Light Background"

                                        value="lightBackground"/>

                                    <darkBackground

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="/libs/granite/ui/components/foundation/form/radio"

                                        text="Dark Background"

                                        value="darkBackground"/>

                                </items>

                            </column>

                        </items>

                    </backgroundColor>

                    <disclaimerAlignment

                        cq:showOnCreate="{Boolean}true"

                        jcr:primaryType="nt:unstructured"

                        jcr:title="Disclaimer Alignment"

                        sling:resourceType="granite/ui/components/foundation/section">

                        <layout

                            jcr:primaryType="nt:unstructured"

                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

                            margin="{Boolean}false"/>

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

                            <column

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/container">

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

                                    <left

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="/libs/granite/ui/components/foundation/form/radio"

                                        text="Left"

                                        value="left"/>

                                    <center

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="/libs/granite/ui/components/foundation/form/radio"

                                        text="Center"

                                        value="text-center"/>

                                    <right

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="/libs/granite/ui/components/foundation/form/radio"

                                        text="Right"

                                        value="text-right"/>

                                </items>

                            </column>

                        </items>

                    </disclaimerAlignment>

                    <text

                        cq:showOnCreate="{Boolean}false"

                        jcr:primaryType="nt:unstructured"

                        jcr:title="Text Editor"

                        sling:resourceType="granite/ui/components/foundation/section">

                        <layout

                            jcr:primaryType="nt:unstructured"

                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

                            margin="{Boolean}false"/>

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

                            <column

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/container">

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

                                    <richTextEditor

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="cq/gui/components/authoring/dialog/richtext"

                                        disabled="{Boolean}false"

                                        name="./rteText"

                                        useFixedInlineToolbar="{Boolean}true">

                                        <rtePlugins

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceSuperType="/apps/myproject/components/content/richTextEditorExtended/dialog/items/tab1/items/text/rtePlugins">

                                            <fullscreen

                                                jcr:primaryType="nt:unstructured"

                                                features="*"/>

                                        </rtePlugins>

                                    </richTextEditor>

                                </items>

                            </column>

                        </items>

                    </text>

                </items>

            </tabs>

        </items>

    </content>

</jcr:root>

dialog.xml which I am referencing in touch ui dialog

---------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root 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="cq:Dialog"

    helpPath="en/cq/current/wcm/default_components.html#Text"

    title="Rich Text Editor"

    xtype="tabpanel">

    <items jcr:primaryType="cq:WidgetCollection">

        <tab1

            jcr:primaryType="cq:Widget"

            anchor="100%"

            title="Text"

            xtype="panel">

            <items jcr:primaryType="cq:WidgetCollection">

                <text

                    jcr:primaryType="cq:Widget"

                    hideLabel="{Boolean}true"

                    name="./text"

                    xtype="richtext">

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

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

                            <linkDialogConfig

                                jcr:primaryType="nt:unstructured"

                                height="{Long}316">

                                <linkAttributes jcr:primaryType="cq:WidgetCollection">

                                    <linkAdvanced

                                        jcr:primaryType="cq:Widget"

                                        collapsed="{Boolean}true"

                                        collapsible="{Boolean}true"

                                        inputValue="advanced"

                                        name="./linkdialog/cq:adhocLinkTrackingTab"

                                        title="Link tracking"

                                        xtype="dialogfieldset">

                                        <items jcr:primaryType="cq:WidgetCollection">

                                            <enable

                                                jcr:primaryType="nt:unstructured"

                                                attribute="enabletracking"

                                                fieldDescription="override analytics framework settings"

                                                fieldLabel="Custom link tracking"

                                                name="./linkdialog/cq:adhocLinkTrackingEnableTracking"

                                                xtype="checkbox">

                                                <listeners

                                                    jcr:primaryType="nt:unstructured"

                                                    check="function(component){var dlg=component.findParentByType('rtelinkdialog');dlg.enableSCFields(component.checked);}"/>

                                            </enable>

                                            <events

                                                jcr:primaryType="nt:unstructured"

                                                attribute="adhocevents"

                                                fieldDescription="e.g.: event2, event7"

                                                fieldLabel="Include SiteCatalyst events"

                                                name="./linkdialog/cq:adhocLinkTrackingEvents"

                                                xtype="textfield"/>

                                            <evars

                                                jcr:primaryType="nt:unstructured"

                                                attribute="adhocevars"

                                                fieldDescription="e.g.: eVar1: pagedata.url, prop4: 'const'"

                                                fieldLabel="Include SiteCatalyst variables"

                                                name="./linkdialog/cq:adhocLinkTrackingEvars"

                                                xtype="textfield"/>

                                        </items>

                                    </linkAdvanced>

                                </linkAttributes>

                            </linkDialogConfig>

                        </links>

                        <experience-aem-ip

                            jcr:primaryType="nt:unstructured"

                            features="*"/>

                        <experience-aem-cp

                            jcr:primaryType="nt:unstructured"

                            features="*"/>

                        <paraformat

                            jcr:primaryType="nt:unstructured"

                            features="*"/>

                        <styles

                            jcr:primaryType="nt:unstructured"

                            features="*">

                            <styles jcr:primaryType="cq:WidgetCollection">

                                <disclaimer

                                    jcr:primaryType="nt:unstructured"

                                    cssName="disclaimerText"

                                    text="Disclaimer"/>

                                <login

                                    jcr:primaryType="nt:unstructured"

                                    cssName="loginLink"

                                    text="Login Link"/>

                            </styles>

                        </styles>

                        <misctools

                            jcr:primaryType="nt:unstructured"

                            features="*"/>

                    </rtePlugins>

                </text>

                <isRichTextFlag

                    jcr:primaryType="cq:Widget"

                    ignoreData="{Boolean}true"

                    name="./textIsRich"

                    value="true"

                    xtype="hidden"/>

            </items>

        </tab1>

        <tab2

            jcr:primaryType="cq:Widget"

            xtype="componentstyles"/>

    </items>

</jcr:root>

Thanks & Regards,

Kalyani

[arunpatidar]

Hi Kalyani,

Here you are referring a classic UI dialog inside a touch UI dialog.

Foe implementing global RTE for touch UI, you can do below:

1. Create rte node in your app folder, no need to create dialog for global RTE configuration. you can refer Configuring Experience Manager Rich Text Editor Plugins in a Touch UI Component Dialog  to check how to create rte in touch ui. In above example iRTE is created inside dialog at /apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text you can create rte node at outside dialog e.g. /apps/touchRTE/rte/dialog/text with all plugins

e.g.

2. In your dialog wherever you want to use this plugin create rte node till apps/touchRTE/components/text/cq:dialog/content/items/tabs/items/text/items/column/items/text and then create 2 nodes rtePlugins and uiSettings and set sling:resourceSuperType to /apps/touchRTE/rte/dialog/text/rtePlugins and /apps/touchRTE/rte/dialog/text/uiSettings

The idea is here to reuse rtePlugins and uiSettings not complete rte of dialog.

[sreekalyanip]

Yes Arun, I am using the dialog.xml in touch ui. Actually i am trying to reuse the existing dialog with RTE plugins in touch ui dialog.

[arunpatidar]

I am not sure if this will give you the desire output. Can you setup new RTE Plugin nodes in touch UI and use that. Or inherits only rtePlugins and uiSettings node only not complete dialog.

[sreekalyanip]

I have already done the above approaches mentioned by you. But still the problem exists.

Checking other options like disabling the component level maximize button.

[arunpatidar]

Hi,

I won't recommend that. You should try to create touch UI RTE plugin. if you can convince other to use RTE in minimise mode the you can put below CSS to hide toggle button in "cq.authoring.dialog" ClientLibs

.cq-dialog-header .cq-dialog-layouttoggle {

  display:none;

}

[BrianKasingli]

This might be too late as an answer, but I think current users will find this answer useful. Checkout this blog article that solves the problem.

How to Write AEM Reusable Touch UI, Granite UI Configuration, https://sourcedcode.com/blog/aem/how-to-write-aem-reusable-touch-ui-granite-ui-configuration