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

• adlit-andrew

• February 21, 2015 at 6:27 am

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?

• John Huebner

• February 21, 2015 at 4:17 pm

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.

• adlit-andrew

• February 24, 2015 at 2:57 am

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.

• timbr

• February 25, 2015 at 9:52 pm

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;
}

• adlit-andrew

• February 26, 2015 at 1:47 am

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.