Expand my Community achievements bar.

SOLVED

Creating Anchor Links in AEM 6.4

Avatar

Level 3

How do you create Anchor Link in AEM 6.4?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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!

View solution in original post

9 Replies

Avatar

Correct answer by
Community Advisor

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!

Avatar

Level 1

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?

 

Avatar

Level 10
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 ?

Avatar

Community Advisor

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)



Arun Patidar

Avatar

Level 3

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?

Avatar

Community Advisor

@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!

 

Avatar

Level 3

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

Avatar

Community Advisor
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.