Creating Anchor Links in AEM 6.4

[Clarence_Bunch]

How do you create Anchor Link in AEM 6.4?

[Asutosh_Jena_ · Accepted solution]

Hi @Clarence_Bunch 

Do you mean by jump links/hash links? i.e. something with #abcd in the URL and it will take you to certain position in the website?

If this is the ask then, you can configure the id attribute to any of the component that you have on your website so that the markup will have an attribute in DOM such as:

<div id="abcd" class="Something">Some Content</div>

Now in your RTE component, you can configure the link as #(id) i.e. #abcd in this case and save the dialog. Now whenever you will click on the Some Content link, it will take you to the destination hash link.

Let me know if there is any other requirement that I might have misunderstood.

Thanks!

[dheerajmoudgil]

Thanks @Asutosh_Jena_ for your answer.

I have a multifield which takes an RTE input. I tried same approach to create a link using the multifield RTE input but for some reason the URL field of hyperlink icon in my RTE input doesn't allows anything starting with #.
It saves the dialog, but the href attribute of the link is not rendered. Can I edit this validation anywhere?

[Lokesh_Shivalingaiah]

Hi, when you say creating Anchor Links, can you give more details on where are you looking to create it ? within component, within page authoring ?

[Clarence_Bunch]

Page authoring

[arunpatidar]

Hi, To create anchor functionality - 

1. Create an anchor component for Target jump, that asks for an id and create an empty div only with id.

2. Update/extend the link component and add an option to provide anchor text(trigger point) and from java/backend or from frontend append an anchor to link(link#anchor)

[Clarence_Bunch]

From an email.  I want to link to a specific image or text in the AEM page.  I don't have the anchor addin.  How can you accomplish this from the RTE?

[Asutosh_Jena_]

@Clarence_Bunch You can configure the link of the destination page with #link to the image or text which will have an id associated with it.

So the link in RTE on the email will be something like below:

www.abc.com/abcd#someid

now the id attribute on the destination page image/text will be having the value as "someid".

Thanks!

[Clarence_Bunch]

How do we add or edit the id from an authoring perspective if we don't have access to the HTML.

[Asutosh_Jena_]

If the website is on AEM platform and if it's managed by your team, then you should be able to author the id. If there is no way that you can update the markup in the HTML on the destination website then you cannot achieve this.