How To Add CSS in TinyMCE Editor?

TinyMCE is one of the world’s most advanced rich text editors. It’s used ‘under the hood’ on thousands of different kinds of platforms such as email management systems.

The format select style selects drop-down list cannot be enhanced. However, you may boost the second drop-down style selection using the hook TinyMCE before init, which is hidden in a typical WordPress build. All defaults and options are listed in the manual. style select.

• inline – The name of the inline element to create, such as “span.” This inline element will wrap up the current text selection.
• block — The name of the block element to create, such as “h1.” The new block element replaces any existing block elements in the selection.
• selector – A selector pattern in CSS 3 that is used to discover elements within a selection. This may be used to assign classes to individual elements or more complicated objects, such as table rows that are odd.
• classes – A list of classes to apply to the selected items or the new inline/block element, separated by spaces.
• styles – A name/value object containing CSS in TinyMCE Style objects to apply, such as color and so forth.
• attributes – A name/value object containing attributes that should be applied to the chosen items or the new inline/block element.
• exact – When the combined similar styles functionality is utilized, it is disabled. However, some CSS inheritance difficulties, such as text decoration for underline/strike, need this.
• wrapper – Indicates that the current format is a block element container format. A div wrapper or a blockquote, for example.

The Style Button in TinyMCE Editor

Note that, by default, the Style dropdown is hidden on WordPress. At first add the button for custom formats to a menu bar of CSS in TinyMCE, in the example line 2 with hook mce_buttons_2.

   <?php
        add_filter( 'mce_buttons_2', 'geekerhub_mce_editor_buttons' );
        function geekerhub_mce_editor_buttons( $buttons ) {
            
            array_unshift( $buttons, 'styleselect' );
            return $buttons;
        }
   ?>

The Custom Styles

Then improve the button’s drop-down menu. The augmentation via additional value in the array is also valuable; check the codex for an example.

 <?php 
    $style_formats = array(
        array(
            'title' => 'Headers',
                'items' => array(
                array(
                    'title' => 'Header 1',
                    'format' => 'h1',
                    'icon' => 'bold'
                ),
                array(
                    'title' => 'Header 2',
                    'format' => 'h2',
                    'icon' => 'bold'
                )
            )
        ),
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
        )
    );
?>

Result

Enhanced Drop down menu

The default values of the Style Format drop-down box provide additional options and parameters (writing in JavaScript).

 $style_formats = array(
        array(
            'title' => 'Headers',
                'items' => array(
                array(
                    'title' => 'Header 1',
                    'format' => 'h1',
                    'icon' => 'bold'
                ),
                array(
                    'title' => 'Header 2',
                    'format' => 'h2',
                    'icon' => 'bold'
                )
            )
        ),
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
        )
    );

The default values of the Style Format drop-down box provide additional options and parameters (writing in JavaScript).

 var defaultStyleFormats = [
            {title: 'Headers', items: 
            [        {title: 'Header 1', format: 'h1'},        {title: 'Header 2', format: 'h2'},        {title: 'Header 3', format: 'h3'},        {title: 'Header 4', format: 'h4'},        {title: 'Header 5', format: 'h5'},        {title: 'Header 6', format: 'h6'}    ]},

    {title: 'Inline', items: [
        {title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
        {title: 'Superscript', icon: 'superscript', format: 'superscript'},
        {title: 'Subscript', icon: 'subscript', format: 'subscript'},
        {title: 'Code', icon: 'code', format: 'code'}
        {title: 'Bold', icon: 'bold', format: 'bold'},
        {title: 'Italic', icon: 'italic', format: 'italic'},
        {title: 'Underline', icon: 'underline', format: 'underline'},
    ]},

        {title: 'Blocks', items: [
        {title: 'aside', format: 'aside'},
        {title: 'article', format: 'article'}
        {title: 'main', format: 'main'}
        {title: 'Blockquote', format: 'blockquote'},
        {title: 'Div', format: 'div'},
        {title: 'Pre', format: 'pre'}
        
       
    ]},

    {title: 'Alignment', items: [
        {title: 'Right', icon: 'alignright', format: 'alignright'},
        {title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
        {title: 'Left', icon: 'alignleft', format: 'alignleft'},
        {title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
    ]}
    ];

Add Custom Stylesheet to the TinyMCE editor

The final element is to use hook mce.css to include the custom CSS for these formats.

    <?php 
        /*
        * Apply styles to the visual editor
        */  
        
        add_filter( 'mce_css', 'geekerhub_mcekit_editor_style');
        function geekerhub_mcekit_editor_style($url) {
        if ( ! empty( $url ) )
            $url .= ',';
        // Gets the URL of the plugin directory.
        // If you're using other folders, change the path here.
        $url .= trailingslashit( plugin_dir_url( __FILE__ ) ) . '/my-editor-styles.css';

        return $url;
        }
    ?>    

Don’t forget to include these rules in the front-end stylesheet as well.

Format Button should be removed

You can improve this by checking for the value in the button array and removing the format select drop-down button. At the MCE buttons 2 hooks, add the following source to the function FB me editor buttons.

  <?php 
    
        $value = array_search( 'formatselect', $buttons );
        if ( FALSE !== $value ) {
        foreach ( $buttons as $key => $value ) {
        if ( 'formatselect' === $value )
            unset( $buttons[$key] );
        }
      } 
    
 ?>

Orignal Source:- https://geekerhub.com/how-to-add-css-in-tinymce-editor/