Modifying the link target options in rich text editor

[#1]

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?

[SiriusRex · Accepted solution]

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

[SiriusRex · Accepted solution]

Hi Anudeep, thank you for this suggestion. I agree it seems simpler to hide the items rather than try to remove them from the DOM. I do have a question around the clientlib: I have an existing clientlibs folder, with a "clientlib-authoring" folder under that. I'd like to place this new clientlib there, but does that mean creating a folder inside "clientlib-authoring" with a name like "linktargetfix" (for example) and the creating the .content.xml file, js, and txt files there? The "clientlib-authoring" folder already has a .content.xml file that sets the category as "cq.authoring.dialog.all". Thanks in advance for any pointers.