AEM customizing rich text editor link dialog

This article covers, how to customize rich text editor in AEM, sometimes you need to add additional options in rich text editor link dialog, the link dialog appears when we try to author links in the rich text editor, now a days when we go to any project open a page in modal popup is a common requirement, when we click on link button it should open a configured page in modal popup

The first thing which is overlay the file LinkDialog.js file from the libs folder to apps folder /apps/cq/ui/widgets/source/widgets/form/rte/plugins/LinkDialog.js  Add code like shown below to remove the checkbox and add a drop down

In the LinkDialog default constructor replace the target type default functionality code with the below code

Next, replace the dialog from and dialog to code with the below code

We need to add entries into the xssprotection config.xml file, otherwise the remote-target field will not render , for this, I am going to overlay /apps/cq/xssprotection/config.xml file

In the config file add the entries as below for all the attributes we want to add in the HTML

Add the below attributes under the <common-attributes> tag. Please modify the regexp value as desired to allow the desired attribute name.

Under <tag name=”a” action =”validate”>  the section add the names of the attributes you wish to add

Now, go to aem page and author richtexteditor and finally you should see something like this in LinkDialog of richtexteditor

linkdialog

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Visit Us On FacebookVisit Us On Google PlusVisit Us On Twitter