How can i automatically generate anchor ids to h2 and h3 added using ck editor ? I need it for making a table of content.

  • 1
    Not sure if anyone has built an integration module for this, but I would leverage ckeditor.com/cke4/addon/toc
    – Kevin
    Jul 8, 2020 at 13:12
  • interesting but would probably create a toc for each content type fields. A module would be needed to generate a toc for the full page , including paragraphs etc . I have maded it in JS
    – Matoeil
    Jul 8, 2020 at 13:15
  • 1
    I've been looking for a plugin that lets authors assign/change ID attributes to any selected element via the UI; it would extend this nicely. CKE4 doesn't have it, but @rhystubbs created a plugin to do this in CKE5: github.com/ckeditor/ckeditor5/issues/7369
    – Timmah
    Jul 11, 2022 at 7:46

1 Answer 1


in JS, id set from the h2 label two first words :

const headings = document.querySelectorAll(
  ".article--full h2, .article--full h3"
const tocElements = createTocElementsArray(headings);

function createTocElementsArray(headings) {
  const tocElements = [];   
  for (const item of headings) {
    if (item.id === "") {
      item.id = item.firstChild.data
        .split(" ")
        .slice(0, 2)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.