Support

Account

Home Forums Backend Issues (wp-admin) Custom wysiwyg styleselect

Solved

Custom wysiwyg styleselect

  • Hello, using ACF Pro, I’ve been trying to create some new styleselect options for the wysiwyg editor, as I need 3 new styles inside it (blockquotes with classes). As the wysiwyg uses the tinyMCE, and following the guide from wp codex https://codex.wordpress.org/TinyMCE_Custom_Styles, I tried inserting the following code in my functions.php

    // Callback function to insert 'styleselect' into the $buttons array
    function wpb_mce_buttons_2($buttons) {
        array_unshift($buttons, 'styleselect');
        return $buttons;
    }
    add_filter('mce_buttons_2', 'wpb_mce_buttons_2');
    
    /*
    * Callback function to filter the MCE settings
    */
    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
    	* Title is the label which will be visible in Formats menu
    	* Block defines whether it is a span, div, selector, or inline style
    	* Classes allows you to define CSS classes
    	* Wrapper whether or not to add a new block-level element around any selected elements
    	*/
    		array(  
    			'title' => 'Quote 1',  
    			'block' => 'blockquote',  
    			'classes' => 'quote-1',
    			'wrapper' => true,
    		),  
    		array(  
    			'title' => 'Quote 2',  
    			'block' => 'blockquote',  
    			'classes' => 'quote-2',
    			'wrapper' => true,
    		),
    		array(  
    			'title' => 'End quote',  
    			'block' => 'blockquote',  
    			'classes' => 'quote-end',
    			'wrapper' => true,
    		),
    	);
    
    	// 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' ); 

    But it’s not adding the new stylesheets as expected. Any ideas on what’s wrong?

    Using 2 extra plugins (Advanced Editor Tools AND TinyMCE Custom Styles) I get the result I want so it can surely be done, but that’s causing extra plugin dependencies, and I want to avoid that.

  • Actually it does work!
    As a ‘rookie’ I didn’t see the ‘Toggle Toolbar’ button that makes the new stylesheets appear in the secondary toolbar below…

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

You must be logged in to reply to this topic.