The “Formats” dropdown allows WYSIWYG editors to add CSS classes to configurable content types while editing.

$_LW->CONFIG['STYLE_FORMATS']=[
        [
                'title' => 'Button (primary)',
                'selector' => 'a',
                'classes' => 'btn btn-primary'
        ],
        [
                'title' => 'Button (CTA)',
                'selector' => 'a',
                'classes' => 'btn btn-cta'
        ],
        [
                'title' => 'Circle Image',
                'selector' => 'img,picture',
                'classes' => 'image-circle'
        ],
        [
                'title' => 'Bordered box',
                'selector' => 'h2,h3,h4,h5,h6,span,p',
                'classes' => 'border'
        ],
];

The “selector” attribute defines the valid selector for the style (multiple selectors can be listed as comma separated). The selector also impacts the context for the style’s availability. A selector for table elements will appear on in the table WYSIWYG interfaces. A selector for a links will appear in the insert-link interface, and so forth.

The “classes” attribute defines the class name to be applied to the element. (This also supports multiple classes, separated with spaces.)

Note: Some builds use a special CSS class like “mce-format-header” to allow organization and styling of those dropdown elements, including it in the wsyiwyg CSS but not giving it special styling in the front-end theme. 

$_LW->CONFIG['STYLE_FORMATS']=[ // style formats for WYSIWYG style dropdown
        ['title' => 'Image styles:', 'selector' => 'img, picture', 'classes'=>'mce-format-header'],
        ['title' => ’Rounded corner, bottom left', 'selector' => 'img, picture', 'classes'=>'border-bottom-left'],
        ['title' => ’Rounded corner, bottom right', 'selector' => 'img, picture', 'classes'=>'border-bottom-right'],
        ['title' => 'Link/button styles:', 'selector' => 'a', 'classes'=>'mce-format-header'],
        ['title' => 'Primary button', 'selector' => 'a', 'classes'=>'btn btn-primary'],
        ['title' => 'CTA button', 'selector' => 'a', 'classes'=>'btn btn-cta'],
        ['title' => 'Offsite link', 'selector' => 'a', 'classes'=>'offsite'],
        ['title' => 'Download link', 'selector' => 'a', 'classes'=>'download'],
        ['title' => 'Text styles:', 'selector' => 'p, h2, h3, h4, h5, h6, li', 'classes'=>'mce-format-header'],
        ['title' => 'Space above', 'selector' => 'p, h2, h3, h4, h5, h6, li', 'classes'=>'space-above'],
        ['title' => 'Space below', 'selector' => 'p, h2, h3, h4, h5, h6, li', 'classes'=>'space-below'],
        ['title' => 'Line above', 'selector' => 'p, h2, h3, h4, h5, h6, li', 'classes'=>'line-above'],
        ['title' => 'Line below', 'selector' => 'p, h2, h3, h4, h5, h6, li', 'classes'=>'line-below'],
        ['title' => 'Table styles:', 'selector' => 'table', 'classes'=>'mce-format-header'],
        ['title' => 'Basic table', 'selector' => 'table', 'classes'=>'table'],
        ['title' => 'Small text table', 'selector' => 'table', 'classes'=>'small-text-table'],
];

Note: In some cases you may also want to use the “inline” or “block” attribute. These specify an inline or block tag to be applied to the selector.