Add custom style button to wysiwyg in Advanced custom fields

1 comment

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');
   

Comments are closed.