Ckeditor5: Header id attribute in ckeditor 5 heading plugin

[shakthifuture]

Hi Team,

How to add id attribute in header element using CKEditor heading plugin?

✔️ Expected result

"

Testing

"

❌ Actual result

"

Testing

"

Thanks for your help.

[rshipp]

I'd also like to see this specific feature! It's currently possible with some custom converters (see also my convoluted solution here), but heading IDs seems like it would be used often enough in the kind of content design work CKE5 is meant for that it'd be a good builtin.

[shakthifuture]

In my work, compulsory I should use id attribute in heading element. There's any option available without custom converted.

[FilipTokarski]

Hi, thanks for the report. In your heading configuration options you can add something like:

{
    model: 'my_heading',
    view: {
        name: 'h2',
        attributes: {
            class: 'my_heading_class',
            id: 'my_heading_ID',
        }
    },
    title: 'My Heading',
    class: 'ck-heading_heading2',
    // It needs to be converted before the standard 'heading2'.
    converterPriority: 'high'
}

This example will create a custom _h2_ header element with custom _class_ and _id_. You can further adjust it to fit your specific needs.
Hope that helps!

[shakthifuture]

It worked, thank you @FilipTokarski...

[shakthifuture]

Hi @FilipTokarski ,

How to update/change the id value dynamically when I apply the header value in the text?

Thank you.

[FilipTokarski]

You can use this code:

let id = 1;

editor.conversion.for( 'downcast' ).add( dispatcher => {
    dispatcher.on( 'insert:my_heading', ( evt, data, conversionApi ) => {

    const viewWriter = conversionApi.writer;

    viewWriter.setAttribute( 'id', `my_heading_id_${id}`, conversionApi.mapper.toViewElement(data.item ) )

    id += 1;
    } );
} );

For every time the heading is inserted, it will increment id by 1 and add to the heading as an attribute.

[shakthifuture]

Working.. thank you