Reply To: WYSIWYG Source Code Button

• James

• September 6, 2016 at 2:42 pm

Hi @wyclef

First, you need to copy the “tinymce.code.min.js” to anywhere you see fit. For example, you can put it in your child theme: “wp-content/themes/your-child-theme/js/tinymce.code.min.js”.

After that, you need to register this file to tinyMCE like this:

add_filter( 'mce_external_plugins', 'my_acf_mce_external_plugins', 20, 1 );
function my_acf_mce_external_plugins($plugins){
    // global
    global $wp_version;
    
    // WP 3.9 an above
    if( version_compare($wp_version, '3.9', '>=' ) ) {
        
        // add code
        $plugins['code'] = get_stylesheet_directory_uri() . '/js/tinymce.code.min.js';

    }
    
    // return
    return $plugins;
}

Then, you need to add the button to the toolbar like this:

add_action('acf/input/admin_footer', 'my_acf_enable_code_plugin');
function my_acf_enable_code_plugin() {

    ?>
    <script type="text/javascript">
    (function($) {
        
        $(document).ready(function(){
            acf.add_filter('wysiwyg_tinymce_settings', function( mceInit, id ){
                
                // Add code to toolbar
                mceInit.toolbar2 = mceInit.toolbar2 + ",code";

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

I hope this helps 🙂