1

A while back I stumbled across this post from 2015, that showed how to add Tiny MCE-buttons.

It has been working for more than a year. But after the latest WordPress update (to version 5.6) it stopped working (the added dropdown-button isn't in the UI any longer).

What's wierd is that I had made 2 modifications to Tiny MCE:

  • add_filter( 'mce_buttons', 'custom_register_mce_button' ); - which still works.
  • add_filter( 'mce_external_plugins', 'custom_add_tinymce_plugin' ); - which stopped working.

I have the same code running on another site, which has also been updated to version 5.6. On it's the same buttons that has disappeared on both sites. So I'm quite sure that it's the WP-update that messed this up.

And I have checked the source code in the backend, and it is to be found in the code (so I can see that it is loaded).

My code

In functions.php:

/**
 * Add buttons in tinyMCE
 *
 * Source: https://wisdmlabs.com/blog/add-buttons-menu-options-tinymce-wordpress-post-editor/
 */
function custom_add_mce_button(){

    if( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ){
        return;
    }

    if( 'true' == get_user_option( 'rich_editing' ) ){
        add_filter( 'mce_external_plugins', 'custom_add_tinymce_plugin' );
        add_filter( 'mce_buttons', 'custom_register_mce_button' );
    }
}

add_action( 'admin_head', 'custom_add_mce_button' );

function custom_register_mce_button( $buttons ){
    array_push( $buttons, 'custom_mce_button' );

    return $buttons;
}

function custom_add_tinymce_plugin( $plugin_array ){
    $plugin_array['custom_mce_button'] = get_stylesheet_directory_uri() . '/assets/admin/js/tiny-mce-buttons.js';

    return $plugin_array;
}

The contents of tiny-mce-buttons.js:

( function() {
    tinymce.PluginManager.add('custom_mce_button', function(editor, url) {
        editor.addButton('custom_mce_button', {
            text: 'Buttons',
            icon: false,
            type: 'menubutton',
            menu: [
                {
                    text: 'Button (simple)',
                    onclick: function() {
                        editor.insertContent('[button button_text="Read more" title="Google" link="https://google.com"]');
                    }
                },
                {
                    text: 'Button (centered)',
                    onclick: function() {
                        editor.insertContent('[button button_text="Read more" title="Google" link="https://google.com" class="zbtn__primary centered-button"]');
                    }
                },
                {
                    text: 'Button (all properties)',
                    onclick: function() {
                        editor.insertContent('[button button_text="Read more" link="https://google.com" title="Google" open_in_new_tab="yes" class="zbtn__primary"]');
                    }
                }
            ]
        });
    });
})();

How do I add buttons to the Tiny MCE after this update?


Update1

  • I am using the classic editor indeed.
  • I have tried both with and without the plugin: Classic Editor. But ACF uses the classic editor as default for all Wysiwyg-fields, which is where I have this problem.
  • I have tried both with and without the plugin: Advanced Tiny MCE-plugin.
2
  • Are you using the classic editor? – Jacob Peattie Dec 23 '20 at 6:30
  • I've added the answer in the question as an update (in the bottom). But yes, I am using the classic editor. – Zeth Dec 23 '20 at 11:13
1

This exact thing was happening to me after updating. It seems to be an issue with the new version of WordPress not including jquery-migrate.js by default.

I'm not sure on a permanent solution, but installing this plugin has temporarily fixed the issue for me: https://wordpress.org/plugins/enable-jquery-migrate-helper/

0

Having the same problem, can confirm that it appears to be a problem with jQuery. I'm trying to make a newsletter plugin viable again, which is no longer supported by the original author. The tinymce editor also failed after the update to 5.6. I'll post details about my code, maybe. we find the cause.

First Part:

function plugins_loaded() {
        global $builder_id, $email_newsletter, $wp_customize;

        if(isset($wp_customize)) {
            $customizer_theme = $this->get_customizer_theme();
            $builder_theme = $this->get_builder_theme();
            if($builder_id && $customizer_theme == $builder_theme) {
                //Behebung bekannter Kompatibilitätsprobleme
                add_action( 'init', array( &$this, 'cleanup_customizer'), 1 );

                add_action( 'setup_theme' , array( &$this, 'setup_builder_header_footer' ), 999 );
                add_filter( 'wp_default_editor', array( &$this, 'force_default_editor' ) );
                add_filter( 'user_can_richedit', array( &$this, 'force_richedit' ) );

                add_action( 'admin_head', array( &$this, 'prepare_tinymce' ), 999 );

                add_action( 'template_redirect', array( &$this, 'enable_customizer') );
            }
        }

Part 2

function prepare_tinymce() {
        global $enewsletter_tinymce;
        ob_start();

        $tinymce_options = array(
            'teeny' => false,
            'media_buttons' => true,
            'quicktags' => false,
            'textarea_rows' => 25,
            'drag_drop_upload' => true,
            'tinymce' => array(
                'wp_skip_init' => false,
                'theme_advanced_disable' => '',
                'theme_advanced_buttons1_add' => 'code',
                'theme_advanced_resize_horizontal' => true,
                'add_unload_trigger' => false,
                'resize' => 'both'
            ),
            'editor_css' => '<style type="text/css">body { background: #000; }</style>',
        );
        $email_content = $this->get_builder_email_content('');
        wp_editor($email_content, 'content_tinymce', $tinymce_options);

        $enewsletter_tinymce = ob_get_clean();

Part 3

public function render_content() {
        global $enewsletter_tinymce;
        ?>
        <span class="customize-control-title"><?php echo $this->label; ?></span>
        <textarea id="<?php echo $this->id; ?>" style="display:none" <?php echo $this->link(); ?>><?php echo esc_textarea($this->value()); ?></textarea>
        <?php
        echo $enewsletter_tinymce;
        ?>
        
        <script type="text/javascript">
            jQuery(document).ready( function() {
                var content = 0;
                // Unsere tinyMCE-Funktion feuert bei jeder Änderung
                tinymce_check_changes = setInterval(function() {
                        var check_content = tinyMCE.activeEditor.getContent({format : 'raw'});
                        
                        if(check_content != content && check_content != '<p><br data-mce-bogus="1"></p>') {
                            content = check_content;

                            jQuery('#<?php echo $this->id; ?>').val(content).trigger('change');
                        }
                }, 2000);

                //enables resizing of email content box
                var resize;
                var prev_emce_width = 0;
                jQuery('#accordion-section-builder_email_content').on('mousedown', '.mce-i-resize, #content_tinymce_resize', function(){
                    resize_start();
                });
                jQuery('#accordion-section-builder_email_content h3').click(function(){
                    resize_start();
                });
                jQuery("body").mouseup(function() {
                    clearInterval(resize);
                });

                function resize_start() {
                    resize = setInterval(function() {
                        emce_width = jQuery('#content_tinymce_ifr').width()+65;
                        
                        if(emce_width >= '490' && emce_width != prev_emce_width) {
                            jQuery('#customize-controls').css("-webkit-animation", "none");
                            jQuery('#customize-controls').css("-moz-animation", "none");
                            jQuery('#customize-controls').css("-ms-animation", "none");
                            jQuery('#customize-controls').css("animation", "none");
                            prev_emce_width = emce_width;
                            jQuery('#customize-controls, #customize-footer-actions').css("width", emce_width+"px");
                            jQuery('.wp-full-overlay').css("margin-left", emce_width+"px");
                            jQuery('.wp-full-overlay-sidebar').css("margin-left", "-"+emce_width+"px");
                        }
                    },50);  
                }
            });
        </script>
        <?php
    }

In my Debug i can see: Uncaught TypeError: Cannot read property 'getContent' of null

I think that tinymce has a problem with the latest jQuery version with the difference between Probertys and Values.

1
  • What's the properties and values change? I don't see it in the jQuery 3.0 and 3.5 upgrade guides. But obviously it's tinyMCE.activeEditor that's null, and that's not a jQuery value or object is it? – Rup Mar 5 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.