Ckeditor5: Is there a conveniant way to add custom classes?

[nuocu]

Is this a bug report or feature request? (choose one)

🆕 Feature request | Other

💻 Version of CKEditor

11.2.0.

📋

I'm integrating ck5 into a project with a grown and rather lengthy css-style. There are, for example, several classes, that can be applied to lists or tables. I could try and copy or extent the existing plugins and create new buttons for the altered versions. However this seems rather unnecessary complicated, and I'd pretty much prefer to give the classes to the relevant plugins while calling ClassicEditor.create(). 

This might as well be already possible, and if that's the case, I reckon it might be a good idea to add some examples for this in the documentation or place them there more prominently.
The heading and the image plugin actually provide a way to handle that (via image: { styles: [ ... ] } and heading: {options: [ {model, view: {name, classes} ... ]). I would like to to add classes to lists (<li>) in the same way, but could not find out how in the documentation.

Perhaps those options provided in ClassicEditor.create() could be unified, so that all plugins share the same interface and one example in the documentation could suffice.

[Reinmar]

You can add support for <figure> element classes in such a way:

class AllowClassesPlugin {
    constructor( editor ) {
        this.editor = editor;
    }

    init() {
        const editor = this.editor;

        editor.model.schema.extend( 'table', {
            allowAttributes: 'class'
        } );

        editor.conversion.attributeToAttribute( {
            model: {
                name: 'table',
                key: 'class',
                values: [ 'big', 'small' ]
            },
            view: {
                big: {
                    name: 'figure',
                    key: 'class',
                    value: [ 'table', 'some-big-table' ]
                },

                small: {
                    name: 'figure',
                    key: 'class',
                    value: [ 'table', 'some-big-small' ]
                }
            }
        } );
    }
}

This will handle e.g.:

<figure class="table some-big-table">
    <table>
        <tbody>
            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
            <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
        </tbody>
    </table>
</figure>

You can read more about attributeToAttribute() conversion helper.

If you'd like to add support for <table class="*"> then it's more tricky, because the model <table> element maps to the <figure>, not the inner <table> (in the model, there's no <figure>). It'd require a custom converter.

[nuocu]

Support for classes on the <figure> wrapping the <table>is fine for me. Thanks a lot.

Would the same approach work if I need classes on lists (i.e.: <ul class=*">), too?

[scofalik]

Unfortunately, <ul>s are more difficult because of the approach we took when implementing them. In the model, lists are represented the same way paragraphs are. This means that there is no actual <ul> element in the model, it is a flat structure, with indentation levels represented through attributes.

This gave us more stable algorithms for features like enter, removing selections spanning over multiple items, merging blocks, etc. The drawback is that you don't have the parent element - it is created "on the fly" during conversion.

One reasonable way to overcome this would be to assign anything that you'd like on <ul> to the first item in the list. We will use this approach when we will start implementing features like lists starting number or lists styles. But this requires writing a custom converter, it is more difficult than the example above.

[Reinmar]

The answers that we gave in this ticket cover what can be done easily with existing features. https://github.com/ckeditor/ckeditor5/issues/592 will cover creating a nicer and simpler API to extend existing features and add support for more features.

[romanovma]

Back to the response about table classes.
Could you please tell if I can add these 2 new table types to the toolbar somehow?

[sandeepbalagopal09]

Is there a quick way to add class to a media embed figure tag ?