0

Pressing the "Clear Formatting" toolbar button removes styles like bold and italics just fine, but it leaves lists and headings (h1, h2, etc.) as-is. Is there a way to include all elements when clearing the formatting of the content? I've searched and searched but can't seem to find any results pertaining to what I want to do.

I'm mostly using an Advanced Custom Fields WYSIWYG field, but I've tried with WordPress' default Classic Editor as well. I found a single post that showed using the removeformat_selector attribute in TinyMCE's initialization, but that doesn't work. This is what I tried: (using ACF's approach to TinyMCE's init customization)

add_action( 'acf/input/admin_footer', function() {
    ?>
    <script type="text/javascript">
        ( function( $ ) {
            acf.add_filter( 'wysiwyg_tinymce_settings', function( mceInit, id, field ) {
                mceInit['removeformat_selector'] = 'ul,li,b,strong,em,i,span,h1,h2,h3,h4,h5,h6,blockquote,pre,code';
                return mceInit;
            } );
        } )( jQuery );
    </script>
    <?php
} );
2
  • 1
    h1 isn't a style though, it has semantic meaning, are you using a TinyMCE plugin such as TinyMCE advanced? Where are you using the TinyMCE editor to do this? Can you make your question more specific/detailed?
    – Tom J Nowell
    Commented Jul 5, 2022 at 16:25
  • @TomJNowell Thanks, I've updated the post with some more info. While H1 isn't a style, I do think it falls under formatting. In the modern versions of TinyMCE (the cloud service) you're able to customize which styles or elements are removed when the button is pressed.
    – Gavin
    Commented Jul 5, 2022 at 18:28

1 Answer 1

0

I need to answer my own question here. I was using the attributes from TinyMCE v3, but it needed to use the v4 format. Here's what works:

add_action( 'acf/input/admin_footer', function() {
    ?>
    <script type="text/javascript">
        ( function( $ ) {
            acf.add_filter( 'wysiwyg_tinymce_settings', function( mceInit, id, field ) {
                mceInit['formats']['removeformat'] = [{ selector: 'h1,h2,h3,h4,h5,h6,ul,li,b,strong,em,i,span,blockquote,pre,code', remove: 'all', split : true, expand : false, block_expand: true, deep : true }];
                return mceInit;
            } );
        } )( jQuery );
    </script>
    <?php
} );

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