#StackBounty: #tinymce Adding custom block formats to TinyMCE. Everything works until JavaScript error when applying the format

Bounty: 50

I’m trying to add an item into the block formats dropdown in TinyMCE. I would like to add a format called “Heading 2 Light”.

In functions.php I add this code:

function theme_tiny_mce_before_init( $init ) {
    $init[ 'block_formats' ] = 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 2 Light=h2-light;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Address=address;Pre=pre';
    return $init;
add_filter( 'tiny_mce_before_init', 'theme_tiny_mce_before_init' );

and also this:

function theme_after_wp_tiny_mce() {
        jQuery( document ).on( 'tinymce-editor-init', function( event, editor ) {
            tinymce.activeEditor.formatter.register( 'h2-light', {
                block : 'h2',
                classes : 'light'
            } );
        } );
add_action( 'after_wp_tiny_mce', 'theme_after_wp_tiny_mce' );

This code successfully adds “Heading 2 Light” to the list, but when I click on it to apply the format I get this JavaScript error:

Uncaught TypeError: Cannot read property '0' of undefined
    at Object.Eb [as applyFormat] (wp-tinymce.php?c=1&ver=4800-20180716:3)
    at Lb (wp-tinymce.php?c=1&ver=4800-20180716:3)
    at Object.toggle (wp-tinymce.php?c=1&ver=4800-20180716:3)
    at d (wp-tinymce.php?c=1&ver=4800-20180716:3)
    at mceToggleFormat (wp-tinymce.php?c=1&ver=4800-20180716:3)
    at qg.execCommand (wp-tinymce.php?c=1&ver=4800-20180716:3)
    at Hx.execCommand (wp-tinymce.php?c=1&ver=4800-20180716:3)
    at wp-tinymce.php?c=1&ver=4800-20180716:5
    at i.onselect (wp-tinymce.php?c=1&ver=4800-20180716:5)
    at jg.c.fire (wp-tinymce.php?c=1&ver=4800-20180716:3)

The TinyMCE JavaScript file is minified, so it’s very difficult to debug. Does anybody know what’s causing this?

Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.