Table of Contents is not working with CMS richtext

Attributes
1

I thought maybe TOC script runs earlier before Webflow render the CMS content. then I have put the TOC script before the body tag, but its also not working.

I have test the TOC Attribute with static richtext, its working. when I connect that richtext to CMS, TOC is not working.

2

Hey @lissanh95! Can you please share a link?

3

here is the read-only link:
https://preview.webflow.com/preview/appdealpage?utm_medium=preview_link&utm_source=designer&utm_content=appdealpage&preview=d69da8a9f6e9266064138d86410598f5&pageId=65424f8376bc50eb0656c190&itemId=668182b6e39d6e12d17075b1&locale=en

and here is the live link:

4

TOC atrribute script adding IDs to richtext but not creating link elements. so I added my code to create link elements according to the richtext IDs.

5

TOC attribute script also working in other pages with CMS richtext. not sure why its not working in this page.

6

Hey @lissanh95! Sorry for the delay! I see the ToC is working as it should. Did you have to add anything on top?

7

I know why its not working. So basically I was using richtext editor on the front-end which sending the content to the CMS richtext field.

So I have checked the HTML, structure was totally different then normal richtext HTML structure. Thats why attribute was not working so I have manage to fixed that.

8

Thanks for the update! Could you share if there was any special setup? Is any extra code needed?

9

I am using Tinymce Editor to send richtext content to Webflow CMS. so if the content structure is something like this:

<h2>Heading 1</h2>
<div><h2>Heading 2</h2></div>

I think TOC attribute code can detect the 1st H2, it will not the detect other headings which are in the DIV.

So when using TinyMCE, I am checking we dont have any parent DIV for heading content.

1 Like