Support

Account

Home Forums ACF PRO WYSIWYG Source Code Button

Solved

WYSIWYG Source Code Button

  • Hello, I am wondering how I could go about porting the ‘code’ button (TinyMCE Source Code) function back into v5 WYSIWYG toolset?

    It pertains to this function from v4.

    /*
    	*  mce_external_plugins
    	*
    	*  This filter will add in the tinyMCE 'code' plugin which is missing in WP 3.9
    	*
    	*  @type	function
    	*  @date	18/04/2014
    	*  @since	5.0.0
    	*
    	*  @param	$post_id (int)
    	*  @return	$post_id (int)
    	*/
    	
    	function mce_external_plugins( $plugins ){
    		
    		// global
       		global $wp_version;
       		
       		
       		// WP 3.9 an above
       		if( version_compare($wp_version, '3.9', '>=' ) ) {
    			
    			// add code
    			$plugins['code'] = apply_filters('acf/get_info', 'dir') . 'js/tinymce.code.min.js';
    		
    		}
    		
    		
    		// return
    		return $plugins;
    		
    	}

    Without getting into specifics, I am aware of the text tab and how that should allow me to accomplish everything I need however I’m dealing with an older site that has had a slower and more lagged upgrade path and there are some specific things that require this source code button. I could just stick with v4 however feel that isolating this ‘legacy’ feature separately rather than cutting it out would be best in this specific situation. Anyhow, if someone has any ideas how I could add this back into v5 temporarily that would be much appreciated.

    Many Thanks

  • 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 πŸ™‚

  • Perfect. Thanks so much!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.