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.