0

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.

0

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' );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.