TinyMCE múltiplas seleções de classs personalizadas

Eu queria usar algumas classs dentro do meu editor WP TinyMCE. Eu gritei alguns scripts / funções e parece funcionar bem no início. Enquanto eu estou explorando para adicionar mais coisas ao script e adicionar estilo ao meu editor_style, notei no meu “inspecionar elemento” que algumas das minhas chaves não estão funcionando corretamente.

Nota: Eu uso coisas do ShellCreeper e segui tudo lá.

Código atual Fig. 1

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

Estou usando UIKit Framework e queria implementar o estilo para o meu editor.

Problema de caso

Quando eu criar novo link, selecione Button Default e mude para outra class de botão como: Button Large , não mudará a class e estilo e eu tenho que excluir todo o texto para poder criar um novo conjunto de botões com class e estilo . Isso é semelhante ao meu Blockquote ao mudar o alinhamento à esquerda e alinhamento à direita.

Nota: Eu não quero usar o plugin de terceiros para modificar algumas das minhas navegações aqui.

Solutions Collecting From Web of "TinyMCE múltiplas seleções de classs personalizadas"

Ok, encontrei o formato correto para este problema do TinyMCE, que também retém algumas das seleções originais de Style Format . Apreciar!

 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', 'classs' => 'section-headline', 'exact' => '1' ], [ 'title' => 'SubHeadline', 'selector' => 'h1,h2,h3', 'inline' => 'small', 'classs' => 'subheadline', 'exact' => '1' ], ] ], // Content Headers [ 'title' => 'Buttons', 'type' => 'group', 'items' => [ [ 'title' => 'Link', 'selector' => 'a, button', 'classs' => 'uk-button-link', 'exact' => '1' ], [ 'title' => 'Button', 'selector' => 'a, button', 'classs' => 'uk-button uk-button-primary', 'exact' => '1' ], [ 'title' => 'Large Button', 'selector' => 'a, button', 'classs' => 'uk-button-large', 'exact' => '1' ], ] ], // Buttons [ 'title' => 'Quote', 'type' => 'group', 'items' => [ [ 'title' => 'Quote Justify', 'selector' => 'blockquote', 'classs' => 'align-justify', 'exact' => '1' ], [ 'title' => 'Quote Right', 'selector' => 'blockquote', 'classs' => 'align-right', 'exact' => '1' ], [ 'title' => 'Quote Center', 'selector' => 'blockquote', 'classs' => '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' );