Shopware 6 add custom classes to headline tags in text editor

Viewed 479

Is it possible to customize/extend the h1-h6 tags in the sw-text-editor with custom classes like “.headline-1” for example?

const { Component } = Shopware;

Component.override('sw-text-editor', {

    props: {
        buttonConfig: {
            type: Array,
            required: false,
            default() {
                return [
                    {
                        type: 'paragraph',
                        title: this.$tc('sw-text-editor-toolbar.title.format'),
                        icon: 'default-text-editor-style',
                        children: [
                            ...
                            {
                                type: 'formatBlock',
                                name: this.$tc('sw-text-editor-toolbar.title.h1'),
                                value: 'h1',
                                tag: 'h1'
                            },
                            ...
                        ]
                    },
                    ...
                ];
            }
        }
    }
});

Any idea how i can add custom headline tags with specific css classes. Maybe something like this:

{
   type: 'formatBlock',
   name: this.$tc('sw-text-editor-toolbar.title.h1'),
   value: 'h1',
   tag: 'h1',

   classes: 'test-class'
},
0 Answers
Related