Rich Text Editor Dialog Height Resize for AEM

At some point in your development with Adobe Experience Manager, you’ve probably created a dialog with a richtext xtype in it. You open the dialog and begin writing your text. With all of the functionality provided out of the box and with all of the plug-in options available to you, this seems like a great xtype, and indeed it is. However, after you put a paragraph or two of text in the dialog or maybe a larger image, you want to resize the dialog window to see all of your content at the same time. When you do, you realize that the rich text editor doesn’t increase in height. You still have to scroll in the small editor window even though you’ve made your dialog window much larger. Here is one possible fix for this problem.

(Non-Responsive Rich Text Editor Dialog)

When constructing your dialog, make the richtext node a direct child of the root widget collection rather than wrapping it in a tabpanel. If you are building using Maven/Vault, a sample dialog.xml file is listed below.

<?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"

   title="Resizable Rich Text Component"

   xtype="tabpanel">

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

       <text

           jcr:primaryType="cq:Widget"

           title="Text"

           hideLabel="{Boolean}true"

           name="./text"

           xtype="richtext">

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

      <!-- Include your plugins here -->

           </rtePlugins>

       </text>

       <!-- Other dialog tabs go here -->

   </items>

</jcr:root>

Now your text dialog is responsive, but we need to make sure to add the textisRich boolean to the dialog so that the html doesn’t get printed to the screen.

(Responsive Rich Text Editor Dialog)

If you have other tabs in your dialog, be sure to add a hidden boolean field named textIsRich to one of those other tabs.

<?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"

          title="Resizable Rich Text Component"

          xtype="tabpanel">

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

        <text

                jcr:primaryType="cq:Widget"

                title="Text"

                hideLabel="{Boolean}true"

                name="./text"

                xtype="richtext">

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

                <!-- Include your plugins here -->

            </rtePlugins>

        </text>

        <!-- Other dialog tabs go here -->

        <tab2

                jcr:primaryType="cq:Widget"

                xtype="componentstyles">

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

                <style-selection

                        jcr:primaryType="cq:Widget"

                        fieldLabel="Type"

                        name="./cssStyle"

                        type="select"

                        xtype="selection">

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

                        <default

                                jcr:primaryType="nt:unstructured"

                                text="Default"

                                value="default"/>

                        <pull-quote

                                jcr:primaryType="nt:unstructured"

                                text="Pull Quote"

                                value="pull-quote"/>

                    </options>

                </style-selection>

                <isRichTextFlag

                        jcr:primaryType="cq:Widget"

                        ignoreData="{Boolean}true"

                        name="./textIsRich"

                        value="true"

                        xtype="hidden"/>

 

            </items>

        </tab2>

    </items>

</jcr:root>

If you only have one tab in the dialog (the one containing the richtext), you will need to add an additional tab (which can be hidden) to store the textIsRich boolean. An example of how to do that would be to replace the XML comment “Other dialog tabs go here” with the following XML.

      <tab2

               jcr:primaryType="cq:Widget"

               hidden="{Boolean}true"

               anchor="100%"

               title="Tab 2"

               xtype="panel">

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

               <isRichTextFlag

                       jcr:primaryType="cq:Widget"

                       ignoreData="{Boolean}true"

                       name="./textIsRich"

                       value="true"

                       xtype="hidden"/>

           </items>

           <listeners

                   render="function() { this.findParentByType('tabpanel').hideTabStripItem(1); }"

                   jcr:primaryType="nt:unstructured"/>

       </tab2>

So all together with two tabs and some of the plug-ins added back in, our code would look like this:

<?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"

          title="Resizable Rich Text Component"

          xtype="tabpanel">

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

        <text

                jcr:primaryType="cq:Widget"

                title="Text"

                hideLabel="{Boolean}true"

                name="./text"

                xtype="richtext">

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

                <!-- Include your plugins here -->

                <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>

                <misctools

                        jcr:primaryType="nt:unstructured"

                        features="*"/>

                <styles

                        jcr:primaryType="nt:unstructured"

                        features="*">

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

                        <footnote

                                jcr:primaryType="nt:unstructured"

                                cssName="footnote"

                                text="Footnote"/>

                        <quote-source

                                jcr:primaryType="nt:unstructured"

                                cssName="quote-source"

                                text="Quote Source"/>

                        <link-with-icon

                                jcr:primaryType="nt:unstructured"

                                cssName="ui link-with-icon"

                                text="Link WIth Icon"/>

                    </styles>

                </styles>

                <paraformat

                        jcr:primaryType="nt:unstructured"

                        features="*"/>

            </rtePlugins>

        </text>

        <!-- Other dialog tabs go here -->

        <tab2

                jcr:primaryType="cq:Widget"

                xtype="componentstyles">

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

                <style-selection

                        jcr:primaryType="cq:Widget"

                        fieldLabel="Type"

                        name="./cssStyle"

                        type="select"

                        xtype="selection">

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

                        <default

                                jcr:primaryType="nt:unstructured"

                                text="Default"

                                value="default"/>

                        <pull-quote

                                jcr:primaryType="nt:unstructured"

                                text="Pull Quote"

                                value="pull-quote"/>

                    </options>

                </style-selection>

                <isRichTextFlag

                        jcr:primaryType="cq:Widget"

                        ignoreData="{Boolean}true"

                        name="./textIsRich"

                        value="true"

                        xtype="hidden"/>

 

            </items>

        </tab2>

 

    </items>

</jcr:root>

(Responsive Rich Text Editor Dialog with plugins)

In conclusion, to get a responsive RTE dialog, don’t wrap the RTE plug-in in a tab panel and make sure to add the textIsRich boolean as a hidden value.

Source: http://aempodcast.com/2015/rich-text-editor/rich-text-editor-dialog-height-resize-aem/#.Xq_KehNKiqA