Customize ACF WYSIWYG Input Styles

August 13, 2015

Often times, a design will call for separate areas within a page to have their own unique styles applied to them. Whether it’s a different background color, font size, or available space, editing those areas can be frustrating when the backend editor does not have those same styles. By default, ACF does not have the ability to specify a body class for the WYSIWYG editor’s iframed body tag. (a prototype solution has been developed) Thankfully, ACF does have a JavaScript filter available that allows us to directly modify those classes, and with a little trickery, we can use the field options to give our WYSIWYG fields unique classes and thus styles.

The filter that is used for this example is ‘wysiwyg_tinymce_settings‘. This filter makes it possible to edit the TinyMCE settings immediately before the field is initialized. What I decided to do was to make use of the existing CSS wrapper field in the ACF admin:

Then, using the previously mentioned filter, I grab those values and apply them to the WYSIWYG editor’s iframe body tag:

	<?php
	function hwid_acf_admin_footer() {
	?>
	<script>
	( function( $) {
	acf.add_filter( 'wysiwyg_tinymce_settings', function( mceInit, id ) {
	// grab the classes defined within the field admin and put them in an array

	var classes = $( '#' + id ).closest( '.acf-field-wysiwyg' ).attr( 'class' );

	if ( classes === undefined ) {
	return mceInit;
	}

	var classArr = classes.split( ' ' ),
	newClasses = '';

	// step through the applied classes and only use those that start with the 'hwid-' prefix
	for ( var i=0; i<classArr.length; i++ ) {
	if ( classArr[i].indexOf( 'hwid-' ) === 0 ) {
	newClasses += ' ' + classArr[i];
	}
	}
	// apply the prefixed classes to the body_class property, which will then
	// put those classes on the rendered iframe's body tag
	mceInit.body_class += newClasses;
	return mceInit;
	});
	})( jQuery );
	</script>
	<?php
	}

	add_action('acf/input/admin_footer', 'hwid_acf_admin_footer');