Expand my Community achievements bar.

SOLVED

Restrict rootPath of RTE link plugin

Avatar

Level 2

Hey all,

I was wondering if there is a functionality to set the rootPath of RichTextEdit Link plugin. Analogous to the rootPath functionality of a pathField xtype.

I am using AEM6 with old ExtJs Dialogs. My first guess was to set a setting next to the feature definitions 

<links features="[modifylink,unlink]" jcr:primaryType="nt:unstructured" />

I'd be glad if you guys could give me a hint :-)

Regards,

Dim

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi Dim,

We had similar requirement and we were using AEM version 5.6.1.

These might not be the best approaches but we figured out 2 possible ways of doing it:

1. Overlaying OOTB js file

Steps:

  •  We created linkDialogConfig node, for e.g. /libs/foundation/components/text/dialog/items/tab1/items/text/rtePlugins/links/linkDialogConfig
    •  On this node we configured necessary properties (see the screenshot) which we will read in step 3.
    • [img]Approach1.jpg[/img]
  •  Overlay LinkDialog.js which is at location - /libs/cq/ui/widgets/source/widgets/form/rte/plugins/LinkDialog.js
  •  we added highlighted code in constructor,
    • basically we are reading the necessary properties from linkDialogConfig node configured in step 1
    • [img]Approach1-JS.jpg[/img]
  • Below is how you RTE link dialog should appear:
    • [img]Approach1-Dialog.jpg[/img]

       

2. Recreating Link Dialog Config via nodes

Steps:

  •  Create a node of type widgetCollection having name dialogItems under /dialog/items/tab1/items/text/rtePlugins/links/linkDialogConfig/
  •  Under that create a node of type cq:widget having name href and xtype as pathfield. Here you can configure additional properties for your pathfield like label, description, rootpath etc. 
    • we are basically creating a structure using node what LinkDialog.js provides as default constructor via code (see the snapshot below)
    • [img]Approach2.jpg[/img]

 
With Approach 2 the issue is; you will need to create entire structure same as default one created in LinkDialog.js with all listener config and other widget nodes e.g. target checkbox. Hence we resorted to Approach 1.

Hope it helps smiley

-Runal

View solution in original post

4 Replies

Avatar

Correct answer by
Community Advisor

Hi Dim,

We had similar requirement and we were using AEM version 5.6.1.

These might not be the best approaches but we figured out 2 possible ways of doing it:

1. Overlaying OOTB js file

Steps:

  •  We created linkDialogConfig node, for e.g. /libs/foundation/components/text/dialog/items/tab1/items/text/rtePlugins/links/linkDialogConfig
    •  On this node we configured necessary properties (see the screenshot) which we will read in step 3.
    • [img]Approach1.jpg[/img]
  •  Overlay LinkDialog.js which is at location - /libs/cq/ui/widgets/source/widgets/form/rte/plugins/LinkDialog.js
  •  we added highlighted code in constructor,
    • basically we are reading the necessary properties from linkDialogConfig node configured in step 1
    • [img]Approach1-JS.jpg[/img]
  • Below is how you RTE link dialog should appear:
    • [img]Approach1-Dialog.jpg[/img]

       

2. Recreating Link Dialog Config via nodes

Steps:

  •  Create a node of type widgetCollection having name dialogItems under /dialog/items/tab1/items/text/rtePlugins/links/linkDialogConfig/
  •  Under that create a node of type cq:widget having name href and xtype as pathfield. Here you can configure additional properties for your pathfield like label, description, rootpath etc. 
    • we are basically creating a structure using node what LinkDialog.js provides as default constructor via code (see the snapshot below)
    • [img]Approach2.jpg[/img]

 
With Approach 2 the issue is; you will need to create entire structure same as default one created in LinkDialog.js with all listener config and other widget nodes e.g. target checkbox. Hence we resorted to Approach 1.

Hope it helps smiley

-Runal

Avatar

Level 2

Hey Runal,

thank you very much I will give it a try in the next days!

@adobe This really should be made configurable somehow :-/

Regards

Dim

Avatar

Community Advisor

Do write back if it works so that others too get benefited.

Thanks

-Runal

Avatar

Employee

Hello,

I have confirmed this with the developer and the recommended method is:

  1. Overlay the link dialog.
  2. Change the configuration of the path field:
    1. In your /apps version of:
           /libs/cq/ui/widgets/source/widgets/form/rte/plugins/LinkDialog.js
      As always, you must not make any changes in the /libs branch itself as these may be lost at the next upgrade.
    2. Add your rootPath definition; for example
          "rootPath": "/content/geometrixx"

For example, add the definition as shown in:

[img]RTE-Link-RootPath-01.png[/img]

This would result in:

[img]RTE-Link-RootPath-02.png[/img]

Hope that helps.