Add custom style button to wysiwyg in Advanced custom fields - wordpress

Question

I would like to add a custom button to the wysiwyg editor in Advanced custom fields. I have not found any good solution on how to do it.
What I want is a button that wraps the selected text in <span class="someclass"></span> so that I can style this as I want.
How do I do this?

Answer 1

What you will need to do is tie into your TinyMCE editor buttons. This will add a format dropdown to your WYSIWYG editor for the class. You can then select your text and choose the class from the dropdown. Use text view to check to see if it worked.
/*
* Callback function to filter the MCE settings
*/
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2($buttons) {
array_unshift($buttons, 'styleselect');
return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');
function my_mce_before_init_insert_formats($init_array) {
// Define the style_formats array
$style_formats = array(
// Each array child is a format with it's own settings
array(
'title' => 'Some Class',
'inline' => 'span',
'classes' => 'someclass'
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode($style_formats);
return $init_array;
}
// Attach callback to 'tiny_mce_before_init'
add_filter('tiny_mce_before_init', 'my_mce_before_init_insert_formats');