RTE customize hyperlink | Community
Skip to main content
V
vdhim23
Level 5
October 16, 2015
Solved

RTE customize hyperlink

  • October 16, 2015
  • 5 replies
  • 3004 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Runal_Trivedi

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

5 replies

Runal_Trivedi
Runal_TrivediAccepted solution
Level 6
October 16, 2015

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

V
vdhim23Author
Level 5
October 16, 2015

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
Community Advisor
Shubham_boroleCommunity Advisor
Community Advisor
October 16, 2015

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
Runal_Trivedi
Level 6
October 16, 2015

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
CT1012
Level 4
October 17, 2017

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

Thank You

Terms & ConditionsAccessibility statement

Loading footer...