TinyMCE Multiple Custom Classes Selections

Question

I wanted to use some classes inside my WP TinyMCE Editor. I googled some scripts/functions and seems working fine at the beginning. While I am exploring to add more stuff to the script and add style to my editor_style, I noticed in my "inspect element" that some of my keys are not functioning correctly.

Note: I use ShellCreeper stuff and followed everything there.

Current Code Fig. 1

$custom_styles_formats = [
  [ 'title' => 'Quote',
    'items' => [
      [ 'title' => 'Quote Left',  'block' => 'blockquote', 'classes' => 'alignleft',  'icon' => 'alignleft' ],
      [ 'title' => 'Quote Right', 'block' => 'blockquote', 'classes' => 'alignright', 'icon' => 'alignright' ]
    ]
  ],
  [ 'title' => 'Buttons',
    'items' => [
      [ 'title' => 'Button Default', 'selector' => 'a', 'classes' => 'uk-button uk-button-primary' ],
      [ 'title' => 'Button Large', 'selector' => 'a', 'classes' => 'uk-button uk-button-primary uk-button-large' ],
      [ 'title' => 'Button Red', 'selector' => 'a', 'classes' => 'uk-button uk-button-danger' ],
    ]
  ],
  [ 'title' => 'Small', 'inline' => 'small' ],
];

I am using UIKit Framework and wanted to implement the style over to my editor.

Case Issue

When ever I create new link, select Button Default and switch to another button class like: Button Large, it won't switch the class & style and I have to delete the whole text to be able to create new button set with class & style. This is similar to my Blockquote when switching left alignment and right alignment.

Note: I do not want to use third-party plugin to modify some of my navigations here.

Answer 1

Ok, I found the correct format for this TinyMCE issue which also retain some of the original Style Format selections. Enjoy!

function my_wpeditor_buttons( $buttons, $editor_id ) {
  if ( 'content' != $editor_id ) {
    return $buttons;
  }

  array_unshift( $buttons, 'styleselect' );
  return $buttons;
}
add_filter( 'mce_buttons_2', 'my_wpeditor_buttons', 10, 2 );

function my_wpeditor_formats_options( $settings ) {
  $default_style_formats = [
    [ 'title' => 'Headings',
      'items' => [
        [ 'title' => 'Heading 1', 'format' => 'h1' ],
        [ 'title' => 'Heading 2', 'format' => 'h2' ],
        [ 'title' => 'Heading 3', 'format' => 'h3' ],
        [ 'title' => 'Heading 4', 'format' => 'h4' ],
        [ 'title' => 'Heading 5', 'format' => 'h5' ],
        [ 'title' => 'Heading 6', 'format' => 'h6' ],
      ]
    ], // Headings

    [ 'title' => 'Inline',
      'items' => [
        [ 'title' => 'Bold',        'format' => 'bold',         'icon' => 'bold' ],
        [ 'title' => 'Italic',      'format' => 'italic',       'icon' => 'italic' ],
        [ 'title' => 'Underline',   'format' => 'underline',    'icon' => 'underline' ],
        [ 'title' => 'Superscript', 'format' => 'superscript',  'icon' => 'superscript' ],
        [ 'title' => 'Subscript',   'format' => 'subscript',    'icon' => 'subscript' ],
        [ 'title' => 'Code',        'format' => 'code',         'icon' => 'code' ],
      ]
    ], // Inline

    [ 'title' => 'Blocks',
      'items' => [
        [ 'title' => 'Div',         'format' => 'div' ],
        [ 'title' => 'Paragraph',   'format' => 'p' ],
        [ 'title' => 'Pre',         'format' => 'pre' ],
        [ 'title' => 'Blockquote',  'format' => 'blockquote' ],
      ]
    ], // Blocks

    [ 'title' => 'Alignment',
      'items' => [
        [ 'title' => 'Left',    'format' => 'alignleft',    'icon' => 'alignleft' ],
        [ 'title' => 'Center',  'format' => 'aligncenter',  'icon' => 'aligncenter' ],
        [ 'title' => 'Right',   'format' => 'alignright',   'icon' => 'alignright' ],
        [ 'title' => 'Justify', 'format' => 'alignjustify', 'icon' => 'alignjustify' ],
      ]
    ], // Alignment
  ];

    $custom_styles_formats = [
        [ 'title' => 'Header', 'type' => 'group',
            'items' => [
                [ 'title' => 'Headline', 'selector' => 'h1,h2,h3', 'classes' => 'section-headline', 'exact' => '1' ],
                [ 'title' => 'SubHeadline', 'selector' => 'h1,h2,h3', 'inline' => 'small', 'classes' => 'subheadline', 'exact' => '1' ],
            ]
        ], // Content Headers

        [ 'title' => 'Buttons', 'type' => 'group',
            'items' => [
                [ 'title' => 'Link', 'selector' => 'a, button', 'classes' => 'uk-button-link', 'exact' => '1' ],
                [ 'title' => 'Button', 'selector' => 'a, button', 'classes' => 'uk-button uk-button-primary', 'exact' => '1' ],
                [ 'title' => 'Large Button', 'selector' => 'a, button', 'classes' => 'uk-button-large', 'exact' => '1' ],
            ]
        ], // Buttons

        [ 'title' => 'Quote', 'type' => 'group',
            'items' => [
                [ 'title' => 'Quote Justify', 'selector' => 'blockquote', 'classes' => 'align-justify', 'exact' => '1' ],
                [ 'title' => 'Quote Right', 'selector' => 'blockquote', 'classes' => 'align-right', 'exact' => '1' ],
                [ 'title' => 'Quote Center', 'selector' => 'blockquote', 'classes' => 'align-center', 'exact' => '1' ],
            ]
        ], // Buttons
    ];

  $new_style_formats = array_merge( $default_style_formats, $custom_styles_formats );
  $settings['style_formats'] = json_encode( $new_style_formats );
  return $settings;

}
add_filter( 'tiny_mce_before_init', 'my_wpeditor_formats_options' );