Support

Account

Home Forums General Issues Add custom drop-down menu with custom styles to wysiwyg editor

Solving

Add custom drop-down menu with custom styles to wysiwyg editor

  • To the ACF wysiwyg field, I would like to add a custom drop-down menu from which you can select certain pre-defined styles. Is there a way to add such a button to the tinymce editor?

    I thought I might build on the code snippet here: https://www.advancedcustomfields.com/resources/customize-the-wysiwyg-toolbars/
    But adding that code doesn’t seem to do anything to my wysiwyg field…

  • Once you add the code example, you need to amend the WYSIYG field and select the newly named toolbar.

    Just in case you weren’t aware!?

  • Ah, I see, yeah. So it replaces the Full toolbar instead of expand it with an extra button.
    Is there also a way to create a new toolbar that equals the Full toolbar + the extra dropdown menu? Or do you have to repeat all the Full menu options for this as part of the new toolbar?

  • I’ve tried the code below. But this just returns the Full toolbar without the desired extra dropdown menu.

    add_filter( 'acf/fields/wysiwyg/toolbars' , 'my_toolbars'  );
    
    function my_toolbars( $toolbars ) {
    	$style_formats = array(  
    		array(
    			'title' => 'My style',
    			'block' => 'span',
    			'classes' => 'mystyle',
    			'wrapper' => true,
    		),
    	);
    
    	$toolbars['My toolbar'] = $toolbars['Full'];
    	$toolbars['My toolbar'][1]['styleselect'] = json_encode( $style_formats );
    
    	return $toolbars;
    }
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.