Support

Account

Home Forums Backend Issues (wp-admin) How do you add Text Color Button to TinyMCE Basic toolbar?

Solved

How do you add Text Color Button to TinyMCE Basic toolbar?

  • By default ACF has two choices for the WYSIWYG custom field regarding toolbars, Full and Basic. These are both great but I just need one more button( maybe more in another project) in the Basic toolbar.

    I am trying to add the text-color picker to the Basic toolbar.

    Based on this documentation here, ACF Documentation, I came up with this:

    add_filter( 'acf/fields/wysiwyg/toolbars' , 'my_toolbars'  );
    function my_toolbars( $toolbars ) {
        array_unshift( $toolbars['Basic' ] , 'forecolor' );
        return $toolbars;
    }

    I also looked at this past question,”How to add a button to ACF tiny MCE editor“, but didn’t find the links provided very clear in producing a result(maybe partially because comments were in French).

    I am guessing it has something to do with what was said in that questions comments about missing the plugin for that button. But I am unsure, any solutions?

  • Have you tried using tinyMCE Advanced. I use it on all my projects and it allows setting up buttons on the editors, but they are all the smae on the editors.

  • I do have tinyMCE Advanced. The thing is when you choose the Basic editor option through ACF it limits it. So that is why I am trying to add it using the filter that I showed above.

  • I think it might require an extra array. Try debugging with this code. Does the after print look right?

    add_filter( 'acf/fields/wysiwyg/toolbars', 'my_toolbars' );
    
    function my_toolbars( $toolbars )
    {
    	// dev
    	echo "<pre style=\"padding:10px;border:1px solid red;background-color:#fff;color:#111;font-family:Courier;\">";
    	print_r( "\n\n"."before we change stuff ▼\n" ); print_r( $toolbars['Basic'] );
    	echo "</pre>";
    
    	array_unshift( $toolbars['Basic'], 'forecolor' );
    
    	// dev
    	echo "<pre style=\"padding:10px;border:1px solid red;background-color:#fff;color:#111;font-family:Courier;\">";
    	print_r( "\n\n"."after we change stuff ▼\n" ); print_r( $toolbars['Basic'] );
    	echo "</pre>";
    
    	return $toolbars;
    }
  • Tim, You were right. Using your code I realized it was prepending the outer array. After changing the code to target the inner array like this:

    add_filter( 'acf/fields/wysiwyg/toolbars' , 'my_toolbars'  );
    function my_toolbars( $toolbars ) {
    	array_unshift( $toolbars['Basic' ][1], 'forecolor' );
    	return $toolbars;
    }

    The Font Color appeared in the Basic Toolbar.

    So that seemed to work! Thank you Tim! Your code was spot on and helped me realize there was another nested array.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.