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 🙂
