Remove buttons from a WYSIWYG editor for a specific ACF field type

You can pretty easily customize the advanced custom fields WYSIWYG toolbars globally, however doing so on a case-by-case basis needs to be done in JS since the editing experience is so dynamic.

This code is looking for a specific ACF field called step_text and sets the WYSIWYG editor to only allow bold, italic and links.

add_action(
    'acf/input/admin_footer',
    static function () {
        ?>
        <script type="text/javascript">
            (function ( $ ) {

                acf
                    .add_filter(
                        'wysiwyg_tinymce_settings',
                        function( mceInit, id, field ) {
                            if ( field.context.dataset.hasOwnProperty( 'type' ) && field.context.dataset.hasOwnProperty( 'name' ) && 'step_text' === field.context.dataset.name && 'wysiwyg' === field.context.dataset.type ) {
                                console.dir(mceInit.toolbar1);
                                mceInit.toolbar1 = 'bold,italic,link';
                            }
                            return mceInit;
                        }
                    )
                ;

            }
            )( jQuery );
        </script>
        <?php
    }
);

Leave a Reply

Your email address will not be published. Required fields are marked *

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