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 we need to do is overlay the LinkDialog.js file from the libs folder to apps folder “/apps/cq/ui/widgets/source/widgets/form/rte/plugins/LinkDialog.js” and add code which is shown below to remove the checkbox and add a drop down

In the LinkDialog, you will see default constructor replace the target type default functionality code with the below code

Next,  you will find two functions dlgFromModel and dlgToModel, 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

 

  • Balu

    Hi Raj,
    Can we implement this for touch ui as well?

    • Raj

      Yes Balu
      But, you need to do some R&D on that I tried it but it took longer than I expected so in between I stopped it

    • Raj Mandalapu

      Yes Balu
      But, you need to do some R&D on that I tried it but it took longer than I expected so in between I stopped it