RTE customize hyperlink

[vdhim23]

Hi

I want to implement the functionality where i need to place the validations on the hyperlink dialog in rte in such a way if the link selected in path field belongs to specific path and author didn't tick on open in new window. It should display the error message not to proceed. How can i implement such thing.

Thanks

[Runal_Trivedi · Accepted solution]

Hi,

I guess below steps would help you achieve what you have mentioned:

Steps:

• First of all you will need to overlay OOTB LinkDialog.js file.
  • Current location of LinkDialog.js is - /libs/cq/ui/widgets/source/widgets/form/rte/plugins/LinkDialog.js
  • Overlay the path and bring it under apps
• You will need to define the buttons config in default constructor i.e. under var defaults
  • Add below button config to it

var defaults = { "title": CQ.I18n.getMessage("Hyperlink"), "modal": true, "width": 400, "height": 160, "dialogItems": [ { "itemId": "href", "name": "href", "parBrowse": true, "anchor": CQ.themes.Dialog.ANCHOR, "fieldLabel": CQ.I18n.getMessage("Link to"), "xtype": "pathfield", "rootPath": rootPath, "ddGroups": [ CQ.wcm.EditBase.DD_GROUP_PAGE, CQ.wcm.EditBase.DD_GROUP_ASSET ], "fieldDescription": CQ.I18n.getMessage("Drop files or pages from the Content Finder"), "listeners": { "dialogselect": { "fn": this.selectAnchor, "scope": this }, "render": this.initHrefDragAndDrop }, "validator": CUI.rte.Utils.scope(this.validateLink, this), "validationEvent": "keyup", "escapeAmp": true }, { "itemId": "targetBlank", "name": "targetBlank", "xtype": "checkbox", "boxLabel": CQ.I18n.getMessage("Open in new window"), "value": "targetBlank" } ],"buttons": [ { "itemId": "okButton", "name": "okButton", "text": CQ.I18n.getMessage("Ok"), "handler": this.checkDialogSubmit, "disabled": false, "scope": this }, { "itemId": "cancelButton", "name": "cancelButton", "text": CQ.I18n.getMessage("Cancel"), "handler": this.cancel, "disabled": false, "scope": this }] };

• what we have achieved with this is; we have overridden the behavior of OK button click.
• Not define checkDialogSubmit in your JS file and perform all validation checks there. Sample is as below:

checkDialogSubmit: function(dialog) { alert('Dialog check called'); var hrefField = this.getFieldByName("href"); var hrefValue = hrefField.getValue(); var targetBlankFieldValue = false; var targetBlankField = this.getFieldByName("targetBlank"); if(targetBlankField){ targetBlankFieldValue = targetBlankField.getValue(); } if(hrefValue.indexOf('geometrixx-media')!=-1 && !targetBlankFieldValue){ alert('for pages of geometrixx-media target_blank needs to be checked'); return false; }else{ this.apply(); } return true; },

• make sure to have this.apply() in your pass condition else dialog wont be saved.

Hope it helps.

Thanks

Runal

[vdhim23]

Hi Runal

Thanks, but i am not able to get this behavior. I just copied paste the file LinkDialog.js under my /apps/myprj folder. But i am not getting the alert on clinking of OK. It seems that file not getting call. Attached is my LinkDialog.js under  /apps/myprj can you please check.

[Shubham_borole]

For the alert that is called i.e. [alert('for pages of geometrixx-media target_blank needs to be checked');] on above code, is there any way we can make changes such that instead of the alert pop-up, the message is displayed inside the hyperlink dialog box?

Something like shown in the image attahced. [img]expected dialog after invalidation.PNG[/img]

[Runal_Trivedi]

You will need to overlay the entire path from libs to apps.

i.e. /libs/cq/ui/widgets/source/widgets/form/rte/plugins/LinkDialog.js to /apps/cq/ui/widgets/source/widgets/form/rte/plugins/LinkDialog.js

Unfortunately the forum doesn't allow to attach the zip otherwise I would have attached it here.

Send me your email id and I will post you the package there.

Thanks

Runal

[CT1012]

Can someone help me with the hyperlink issue Pathfield for Text component hyperlink in 6.3 Classic UI

Thank You