amschlag

Hi hwk-fr,
thanks a lot for your feedback. I understand your code history and reason for this feature. But maybe you could spend some time again to take a look a the problem:

I already used the init hook, but it wasn’t successful.
Also the hint using the mce_external_plugin filter outside any hook, doesn’t work.

I’m using the classic editor (no blocks).

When I add a Layout, the custom buttons in the wysiwyg fields inside those new layouts are visible (only until next reload).
If the Layout is collapsed by user or by setting ‘Default Layout State’, when loaded, the buttons are visible.
When I edit a layout inside a modal, the custom buttons are visible.

I tried it without delayed and with delayed initialization – both without success.

The Custom Buttons are only not visible, when loaded inside flexible field, placed in a layout initially opened… Maybe I oversee something.

My Code

add_filter( 'acf/fields/wysiwyg/toolbars', 'od_toolbars' );
	
	function od_toolbars( $toolbars ) {

		$toolbars['Text Default'] = array();
		$toolbars['Text Default'][1] = array(
			// 'od_mce_btn_headline_h1',
			'od_mce_btn_headline_h2',
			'od_mce_btn_headline_h3',
			'od_mce_btn_headline_h4',
			//'od_mce_btn_categ',
			'od_mce_btn_style_xxl',
			'od_mce_btn_style_xl',
			'od_mce_btn_style_lg',
			'od_mce_btn_style_sm',
			'od_mce_btn_cite',
			// 'styleselect',
			'od_mce_btn_cta',
			'bold', 
			'italic',
			'link',
			'unlink',
			'bullist', 
			'od_mce_btn_list_check',
			'charmap', 
			'removeformat', 
			'pastetext',
			'visualchars',
			'visualblocks'
		);

		return $toolbars;
	}

add_action( 'init', 'od_mce_buttons' );

	function od_mce_buttons() {
		// check user permissions
		if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
			return;
		}
		// check if WYSIWYG is enabled
		if ( get_user_option( 'rich_editing' ) !== 'true' ) {
			return;
		}

		add_filter( 'mce_external_plugins', 'od_mce_add_buttons' );
		add_filter( 'mce_buttons', 'od_mce_register_buttons' );
	}

	function od_mce_add_buttons( $plugin_array ) {
		$plugin_array['od_mce_btn_formats'] = get_template_directory_uri() . '/assets/admin/mce-btn-formats.js';
		
		return $plugin_array;
	}

	function od_mce_register_buttons( $buttons ) {
		array_push( $buttons, 'od_mce_btn_categ' );
		array_push( $buttons, 'od_mce_btn_headline_h1' );
		array_push( $buttons, 'od_mce_btn_headline_h2' );
		array_push( $buttons, 'od_mce_btn_headline_h3' );
		array_push( $buttons, 'od_mce_btn_headline_h4' );
		array_push( $buttons, 'od_mce_btn_style_xl' );
		array_push( $buttons, 'od_mce_btn_style_lg' );
		array_push( $buttons, 'od_mce_btn_style_sm' );
		array_push( $buttons, 'od_mce_btn_style_xs' );
		array_push( $buttons, 'od_mce_btn_cta' );
		array_push( $buttons, 'od_mce_btn_cite' );
		array_push( $buttons, 'od_mce_btn_list_check' );

		return $buttons;
	}

The mce-btn-formats.js

jQuery( function( $ ) {

/*	================================================== 
	MCE Custom Buttons
	================================================== */

	tinymce.PluginManager.add( 'od_mce_btn_formats', function( editor, url ) {
		
		let formats = {
			'h1' 	: {
				id 			: 'headline_h1',
				name 		: 'Headline h1',
				image		: 'mce-btn-headline-h1.png',
				disabledSel : 'span, blockquote, ul, ol, li',
				opts 		: {
					block 		: 'h1',
					exact		: true
				}
			},
			'h2' 	: {
				id 			: 'headline_h2',
				name 		: 'Headline h2',
				image		: 'mce-btn-headline-h2.png',
				disabledSel : 'span, blockquote, ul, ol, li',
				opts 		: {
					block 		: 'h2',
					exact		: true
				}
			},
			'h3' 	: {
				id 			: 'headline_h3',
				name 		: 'Headline h3',
				image		: 'mce-btn-headline-h3.png',
				disabledSel : 'span, blockquote, ul, ol, li',
				opts 		: {
					block 		: 'h3',
					exact		: true
				}
			},
			'h4' 	: {
				id 			: 'headline_h4',
				name 		: 'Headline h4',
				image		: 'mce-btn-headline-h4.png',
				disabledSel : 'span, blockquote, ul, ol, li',
				opts 		: {
					block 		: 'h4',
					exact		: true
				}
			},
			'categ' 	: {
				id 			: 'categ',
				name 		: 'Category',
				image		: 'mce-btn-categ.png',
				disabledSel : 'span, blockquote, ul, ol, li',
				opts 		: {
					inline		: 'em',
					selector	: 'h1, h2, h3, h4',
					classes		: 'categ',
					exact		: true
				}
			},
			'style_xxl' 	: {
				id 			: 'style_xxl',
				name 		: 'Text xxlarge',
				image		: 'mce-btn-style-xxl.png',
				disabledSel : 'h1, h2, h3, h4, blockquote',
				opts 		: {
					selector	: 'p, li',
					classes		: 'xxl',
					exact		: true
				}
			},
			'style_xl' 	: {
				id 			: 'style_xl',
				name 		: 'Text xlarge',
				image		: 'mce-btn-style-xl.png',
				disabledSel : 'h1, h2, h3, h4, blockquote',
				opts 		: {
					selector	: 'p, li',
					classes		: 'xl',
					exact		: true
				}
			},
			'style_lg' 	: {
				id 			: 'style_lg',
				name 		: 'Text large',
				image		: 'mce-btn-style-lg.png',
				disabledSel : 'h1, h2, h3, h4, blockquote',
				opts 		: {
					selector	: 'p, li',
					classes		: 'lg',
					exact		: true
				}
			},
			'style_sm' 	: {
				id 			: 'style_sm',
				name 		: 'Text small',
				image		: 'mce-btn-style-sm.png',
				disabledSel : 'h1, h2, h3, h4, blockquote',
				opts 		: {
					selector	: 'p, li',
					classes		: 'sm',
					exact		: true
				}
			},
			'cite' 	: {
				id 			: 'cite',
				name 		: 'Zitat',
				image		: 'mce-btn-cite.png',
				disabledSel : 'h1, h2, h3, h4',
				opts 		: {
					block 		: 'blockquote',
					exact		: true,
					wrapper		: true,
				}
			},
			'cta' 	: {
				id 			: 'cta',
				name 		: 'CTA Button',
				image		: 'mce-btn-cta.png',
				disabledSel : 'h1, h2, h3, h4',
				opts 		: {
					selector 	: 'a',
					classes		: 'btn',
					exact		: true
				}
			},
			'list_check' 	: {
				id 			: 'list_check',
				name 		: 'Checkliste',
				image		: 'mce-btn-list-check.png',
				disabledSel : 'h1, h2, h3, h4, blockquote, a, p, span, em, strong',
				opts 		: {
					selector 	: 'ul',
					classes		: 'list--check',
					exact		: true
				}
			}
		};

		$.each( formats, function( index, format ) {

			editor.on( 'init', function () {
				editor.formatter.register( '_'+ format['id'], format['opts'] );
			} );

			editor.addButton( 'od_mce_btn_'+ format['id'], {
				title					: format['name'],
				image 					: url +'/'+ format['image'],
				disabledStateSelector 	: format['disabledSel'],
				onPostRender			: function() {
					var self = this;
					var setup = function() {
						editor.formatter.formatChanged( '_'+ format['id'], function( state ) {
							self.active( state );
						});
					};
					editor.formatter ? setup() : editor.on( 'init', setup );
					this.disabled( false );
				},
				onClick					: function() {
					editor.formatter.toggle( '_'+ format['id'] );
				}
			} );
		} );
	} );
});