Modifying the link target options in rich text editor

Avatar

Avatar

SiriusRex

Avatar

SiriusRex

SiriusRex

04-11-2020

I've been asked to modify the Link dialog in AEM's rich text editor to remove unneeded target options like "parent frame" and "top frame." I found this method of removing items, but it's giving me an "undefined" error when I try to use it. 

 

I've searched for any information on possibly modifying this in the component dialog's .content.xml file, but there doesn't seem to be anything out there.

 

In other components, we just have a simple URL input field along with a checkbox for "open in a new tab." I imagine I could write a plugin for the rich text editor that uses this approach, but I haven't done that before and I'm not sure where to start or how to make sure the given URL gets added to the text content properly.

 

Does anyone out there have experience with this, or a place where I can look to get this information?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Anudeep_Garnepudi

Avatar

Anudeep_Garnepudi

Anudeep_Garnepudi

04-11-2020

Hi @SiriusRex 

I would suggest CSS work around rather that hiding through Javascript. Hiding CSS is always safe, less chances of failure and easy to update. Please follow below steps.

Key points:

  • Always use your own categories, never use OOTB categories as it may break OOTB functionality
  • Specify your own categories using extraClientLibs property to dialog(cq:dialog) node
  • This way it will be specific to dialog and clientlib will only be loaded on page if you open dialog

Steps to hide link Target options:

  1. Create a clientlib folder(here you can use your existing one)
  2. Add your own categories name(here you remove OOTB category and add your own)
  3. Create css.txt and style.css files (you can remove your js.txt and .js file)
  4. Add styles to hide options

You can add below styles in .css file to hide options

.cq-RichText .rte-dialog--link coral-selectlist-item[value*="_parent"],
.cq-RichText .rte-dialog--link coral-selectlist-item[value*="_top"] {
    display: none;
}

Hope this work.

AG

 

Answers (0)