TinyMCE init/reinit based on action

• Femto

• November 19, 2017 at 3:14 am

I have 2 questions:

1. I have a Flexible Content field with a lot of complex layouts that contain a lot of WYSIWYG TinyMCE fields and each page can have multiple of these layouts.

Because of that, things can get quite slow so I’ve enabled the “Delay initialization” option for the WYSIWYG fields, and I’ve also “collapsed” all parent layouts by default as the Edit Page screen can get very long with a lot of layouts:

$('[data-name=layouts] > .acf-input > .acf-flexible-content > .values > .layout').addClass('-collapsed');

However, I would like to automatically find and initialize all children WYSIWYG fields once the collapsed parent layout handle is clicked and the layout expands.

2. I’ve added my theme’s stylesheet to TinyMCE with add_editor_style() to match my front-end typography/styles with the editor and I’m adding the “wysiwyg-content” class to TinyMCE to apply my theme’s styles.

acf.add_filter('wysiwyg_tinymce_settings', function(mceInit, id) {
    mceInit.body_class += ' wysiwyg-content';
    return mceInit;
});

I also have an ACF button group next to some of my WYSIWYG fields that changes the background color of the content on the front-end to something like “Red/Green/Blue” – similar to the first example screenshot.

How would I reinitialize the TinyMCE instance closest to the button group to toggle a red/green/blue class to it in addition to the “wysiwyg-content” class when a button is clicked? I found the “wysiwyg_tinymce_init” action in the ACF documentation, but I’m not sure how/if a “reinit” action exists?

Also, how would I check if a color button is already selected and apply the class to the closest TinyMCE instance on a fresh page load?

Thanks in advance for any pointers and assistance.