Page Jump, Anchor Links, Jump Links

[geoffgolder-ah]

I am trying to have a link to go to a certain section of the page, this basically means setting the name field of an <a> tag and linking to it. Obviously I can link to it, but I am not able to actually set the name of a link.

Is there a way to do this I am missing, or a way to override the actual rich text editor so that it allows us to set the "name" attribute on the link tag?

[AndreiEtumian-earnin]

@geoffgolder-ah Did you find a solution in the end? I am having the same issue right now.

[geoffgolder-ah]

No. Effective duplicate of this: https://github.com/contentful/rich-text/issues/56

[parkersweb]

#56 has been closed - am I right in thinking that the official answer is "fork our editor and write your own"?

[yevmoroz]

#56 has been closed - am I right in thinking that the official answer is "fork our editor and write your own"?

"and then we will adopt your solution", must admit not a bad move :)

[konstantib]

I'm struggling to explain to my Product owner why such basic and commonly used feature is not available in Rich Text editor. One solution that everyone seems to be suggesting is to create Content Type to be used for Headings (or any other text to be jump/anchor linked to) and then use RTE hyperlink functionality to link to entry when creating a link itself. This should be enough data to render Jump links on the FE. However creating yet another content type just for this seems like an overkill.

[waltercolindres]

Hi, curious if this is on a roadmap? 2+ years, I am assuming this will be closed?

[sebbean]

how we doin?

[EliseiNicolae]

Any updates on this one?

[pavelrahman619]

any updates?

[norahine]

Same, any updates on this?

[hapiben]

Any updates for 2022/2023?

[Lucsy3012]

We could really need this in November 2022 as well. Updates here would be great

[ShaunMWallace]

Adding another nice to have here

[bdogaru]

I guess still nothing yet?

Not the same but an alternative would be building a Table of Contents component out of the headings. Live example here

[JulienDefrance]

There seems to be a manual approach to creating "Jump Links" as per this Contentful community thread: https://www.contentfulcommunity.com/t/jump-links-how-do-you-do-em/1598

Also, those 2 articles are presenting how to automatically generate a table of contents out of heading tags:

• https://headlesstemplates.com/blog/table-of-contents-contentful-rich-text-field
• https://vinceparulan.com/blog/how-to-create-table-of-contents-from-contentful-s-rich-text-field/

Hope that helps!

[yoshyosh]

Hi all, I highly recommend using chatgpt to help with this. You can do it with javascript to grab all the headings and dynamically create anchor links. A simple example to start:

// Function to build the table of contents
function buildTableOfContents() {
  // 1. Select all <h2> elements
  const h2Elements = document.querySelectorAll('h2');

  // 2. Create an <ol> element
  const olElement = document.createElement('ol');

  // 3. Iterate over the <h2> elements
  h2Elements.forEach(function(h2, index) {
    // Create an <li> element
    const liElement = document.createElement('li');
    
    // Optional: Create an <a> element for linking
    const aElement = document.createElement('a');
    const anchorId = `toc_${index}`;
    h2.id = anchorId; // Set an id for the <h2> if it doesn't already have one
    aElement.href = `#${anchorId}`;
    aElement.textContent = h2.textContent; // Set the text of the <a> to the <h2> text
    
    // Append the <a> to the <li>
    liElement.appendChild(aElement);
    
    // 4. Append each <li> to the <ol>
    olElement.appendChild(liElement);
  });

  // 5. Insert the <ol> into the page
  // For example, prepend to the body or another container element
  document.body.prepend(olElement);
}

// Call the function to build and insert the table of contents
buildTableOfContents();

But I think it's likely best to parse the contentful entry with nokogiri first to add all headings to the page in a table of contents container, then use javascript to re-arrange and add the anchor text to each heading. This is also helpful for SEO.