How do I get the current wysiwyg toolbar name?

[sanderdv]

I'm trying to customize the instances of wysiwyg-editors. I would like to change the available block_formats based on the toolbar that has been set (like basic, full or any custom one). I'm using the JS api https://www.advancedcustomfields.com/resources/javascript-api/#filters-wysiwyg_tinymce_settings but I can't find any reference to the toolbar name or key. Is that information available at that point? Or is there maybe another way to set the tinymce block_formats based on the toolbar using another hook, or a php hook? I'm using ACF PRO 5.9.0 with Wordpress 5.5.1

[elliotcondon]

Hi @sanderdv

Thanks for the topic. Can you provide some more context/screenshots/information about the block_formats tinymce setting? I'm not familiar with this one.

[sanderdv]

Hi Elliot, Thanks for replying. When I use the wysiwyg settings filter from the JS API acf.add_filter('wysiwyg_tinymce_settings', function( mceInit, id, field ) { }); one of the properties of mceInit is block_formats, which has a value like this Paragraph=p;Heading 2=h2;... You can control which text formats are available in the dropdown. This is also adjustable using the wordpress php filter tiny_mce_before_init, but then it applies to all tiny mce instances. I would like to adjust this list of block_formats based on the name/key of the toolbar. I have some custom toolbars set using the filter acf/fields/wysiwyg/toolbars, like this:

add_filter( 'acf/fields/wysiwyg/toolbars' , function ( $toolbars ) {
    $toolbars['paragraph'] = array();
    $toolbars['paragraph'][1] = array('formatselect', 'italic' , 'underline', 'bullist', 'numlist', 'blockquote', 'link', 'undo', 'redo', 'pastetext', 'removeformat');
    return $toolbars;
});

So my question is: How can I determine if the toolbar called 'paragraph' is used when using the wysiwyg_tinymce_settings filter, so I can adjust the tiny mce editor settings based on that information.

[elliotcondon]

Hi @sanderdv

You can easily find the field's "toolbar" setting within the "wysiwyg_tinymce_settings" JS filter by accessing the field's properties. Here's a quick example that you can add straight to your functions.php file.

add_action('acf/input/admin_footer', function() {
    ?>
    <script type="text/javascript">
    acf.addFilter('wysiwyg_tinymce_settings', function( mceInit, id, field ){
        if( field.get('toolbar') == 'paragraph' ) {
            // do something.
        }
        return mceInit;
    });
    </script>
    <?php
});

[sanderdv]

Hi @elliotcondon ,

Thanks! It works when I add it like that. Do you maybe know why it won't work when use the filter in a seperate js file that I'm enqueing like this? (the acf.js enqueues fine, but the field.get('toolbar') returns undefined, probably because it isn't loaded yet or something)

add_action('acf/input/admin_enqueue_scripts', function () {
    wp_enqueue_script( 'sage/acf.js', asset_path('scripts/acf.js'), array('acf-input'), false, true );
}, 100);

[elliotcondon]

Hi @sanderdv

If called within the "wysiwyg_tinymce_settings" JS filter, there should be no difference in timing. Can you please share with me the full JS you are enqueuing?

[sanderdv]

Hi @elliotcondon

I found the issue! I used acf.add_filter( instead of acf.addFilter(. Now it all works as expected. I guess I missed the warning in the documentation that the pre 5.7 function add_filter returns a jQuery element. Thanks for your help!