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.

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.

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.

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

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