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

admin管理员组

文章数量:1122846

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() {
?>
    <script>
        jQuery( document ).on( 'tinymce-editor-init', function( event, editor ) {
            tinymce.activeEditor.formatter.register( 'h2-light', {
                block : 'h2',
                classes : 'light'
            } );
        } );
    </script>
<?php
}
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?

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() {
?>
    <script>
        jQuery( document ).on( 'tinymce-editor-init', function( event, editor ) {
            tinymce.activeEditor.formatter.register( 'h2-light', {
                block : 'h2',
                classes : 'light'
            } );
        } );
    </script>
<?php
}
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?

• tinymce

Share Improve this question asked Aug 28, 2018 at 18:12 GavinGavin 41477 silver badges2121 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2 +50

What you have is working perfectly in a clean WordPress installation, using Twenty Seventeen, so it means the problem is the way in which you are minifying your JS or anything else within this specific WordPress installation.

Do the usual thing, deactivate all plugins and check again, if the problem is gone activate one by one until you find the one causing the problem, I am pretty sure that it's a plugin, but in case you do that and the problem is still happening, try to use a default template like Twenty Seventeen.

I have had many similar experiences with plugins like W3 Total Cache or similar, where I use them and they break things, so I have to find the guilty configuration, which you do the same way as you check for the guilty plugin, you set everything to default and start activating and testing each option to see which one is causing issues.

Here is a full answer.

You can replicate accordingly. No need for JS! Note that I'm styling the small_paragraph class somewhere else in CSS.

add_filter( 'tiny_mce_before_init' , 'custom_formatselect'  );
function custom_formatselect( $settings ){

    // To appear in main selector
    $block_formats = [
        'Smaller Paragraph=smallParagraph', // Use a custom identifier
        'Paragraph=p',
        'Heading 1=h1',
        'Heading 2=h2',
        'Heading 3=h3',
        'Heading 4=h4'
    ];

    // Convert array to string for block_formats
    $settings['block_formats'] = implode( ';', $block_formats );


    // Add custom formats to the formats option
    $formats = [
        'smallParagraph' => [
            'block' => 'p',
            'classes' => 'small_paragraph',
            'wrapper' => false
        ]
    ];

    // Add the custom formats to the settings
    $settings['formats'] = json_encode( $formats );
    
    return $settings;
} ;

本文标签： Adding custom block formats to TinyMCE Everything works until JavaScript error when applying the format